Html：Contenteditable 如何在按退格键后删除元素之前检测？

Question

我正在制作一个带有<div contenteditable>的文本编辑器。 我想在用户删除编辑器内的图像元素之前提示确认消息。 所以当用户按下退格键时，在删除图像元素之前，应该有一个提示“你确定要删除图像吗？”。

我怎样才能做到这一点？

Answer 1

事件侦听器keydown可以添加到该<div contenteditable>元素。 Keydown和keypress事件发生在内容更改之前，并且event.preventDefault()可用于在编辑之前停止内容。

 window.onload = function(){ document.getElementById("elem").addEventListener('keydown',function(event){ if( event.key=='Backspace' ){ //your condition check can be given here if( confirm('are you sure you want to delete') ){ return; }else{ event.preventDefault(); } } }); }

 .edit-elem{ background-color: red; }

 <div contenteditable="true" class="edit-elem" id="elem"></div>

Answer 2

这是你想要的吗？

 $(document).ready(function(){ $('.remove').click(function(e){ e.preventDefault(); alert('Are You Sure?'); }); $(document).on('keyup','div', function(e){ console.log(e.keyCode); if(e.keyCode == '8'){ alert('You have pressed backspace'); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div contenteditable> <input type="file" class="image" name="image"/> <button type="button" class="remove">Remove</button> </div>