Question

我正在编写一个使用contentEditable的Javascript应用程序。浏览器的“编辑”菜单包含许多条目，这些条目更改了contentEditable的内容 - 我发现除了“删除”之外还有一些方法可以拦截所有内容。因此，“剪切”菜单项有cut事件，“粘贴”菜单项有paste事件等。“删除”菜单项的等价物是什么？

Answer 1

所以你的意思是你想要在删除某些东西时拦截，或者你想要启动删除命令的命令？你可以截取一个关键事件：

$(document).on('keydown', 'div[contenteditable="true"]', function(event){
    var parent = document.getElementById($(this).attr('id'));
    if (event.which == 46) {
        //if delete key is pushed do something
    } else if (event.which == 8) {
       //if backspace key is pushed do something
    }
});

以下是Javascript中所有关键代码的列表：http://css-tricks.com/snippets/javascript/javascript-keycodes/ 以下是可用的所有execCommand属性和浏览器兼容性的列表：http://help.dottoro.com/larpvnhw.php

如果要删除当前选择，可以使用与大多数现代浏览器兼容的文档range.deleteContents();功能，如下所示：

＆＃13;

 function RemoveSelection () {
            if (window.getSelection) {  // all browsers, except IE before version 9
                var selection = window.getSelection ();
                var range = selection.getRangeAt(0);
                range.deleteContents();
                
            }
        }

＆＃13;

<div>
    Select some content on this page with the mouse!
</div>
<button onclick="RemoveSelection ();">Remove selected text</button>

＆＃13;

您还可以查看deleteFromDocument方法：http://help.dottoro.com/ljdslife.php

最新修改 好的，既然我已经更好地理解了您的问题，我发现您可以使用contenteditable上的输入事件来检测您对该问题的任何更改。当您选择一些文本并从浏览器的菜单中选择删除时，或使用删除或退格键时，都可以使用。您基本上比较了之前和之后的文本长度。

删除事件确实没有默认值。以下是所有活动的列表：http://help.dottoro.com/ljfvvdnm.php

＆＃13;

var editor = document.getElementById("editor");
var prevLength = editor.innerHTML.length;
function interceptDelete(evt) {
  var newLength = evt.target.innerHTML.length;
    if(newLength < prevLength) {
        alert('Deleted');
   }
  prevLength = newLength;
}
editor.addEventListener("input", interceptDelete, false);

＆＃13;

<div id="editor" contenteditable="true">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis mollis tellus. Nulla rhoncus venenatis malesuada. Donec mi neque, blandit nec efficitur sit amet, tincidunt vel arcu. Vivamus quis eros vitae nunc gravida hendrerit. Vivamus nibh neque, maximus at fringilla id, scelerisque vitae nulla. Aenean ut turpis ante. Sed gravida id magna nec sollicitudin. Sed quis justo eget erat elementum condimentum non sit amet mauris. Cras fringilla, justo fringilla interdum scelerisque, orci neque elementum erat, bibendum accumsan velit ipsum a ipsum. Ut sed tincidunt felis. Ut sed egestas mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed dolor est, volutpat id suscipit at, faucibus et metus.

Donec non enim in nulla condimentum consequat. Praesent faucibus consectetur maximus. Maecenas quis leo lacinia, ornare enim at, iaculis magna. Donec faucibus nec est vitae lobortis. Nam fermentum tellus tempus, sollicitudin orci id, suscipit lacus. Pellentesque at tortor ultrices, cursus urna consequat, viverra sem. Vestibulum tempor enim nec est lobortis fermentum. Etiam eu accumsan ligula, eget placerat felis. Aliquam nec nunc eu ante dictum pretium. Morbi sed nulla quis libero commodo condimentum.</div>

＆＃13;

你可以欣赏我通过投票或接受我的回答来回答这个问题的时间！谢谢！

Answer 2

Mozilla和WebKit浏览器中contenteditable支持input事件，并在通过浏览器菜单删除内容时触发。可悲的是，它还没有得到IE的支持。

http://jsfiddle.net/cfz1du4h/

拦截＆＃34;删除＆＃34;从Javascript中的编辑菜单

2 个答案: