javascript - 获取被编辑元素的删除事件

Question

我正在尝试为 contentEditable 元素模拟(不存在的)更改事件(但我想这与输入元素的问题相同)。不幸的是，当用户选择一些文本并从浏览器的上下文菜单中选择“删除”时，我不知道如何获取事件。

有什么建议吗？

Answer 1

修订后的答案，2012 年 6 月 8 日

你想要的是HTML5 input event .但是，这目前仅适用于 contenteditable 的 WebKit。元素，但希望也能在其他浏览器中实现:Firefox 14 will apparently have it .这是already implemented in all major browsers for text inputs and textareas .

演示:http://jsfiddle.net/timdown/5e5E5/1/

HTML:

<div id="test" contenteditable="true">...</div>

JS:

var editableDiv = document.getElementById("test");

editableDiv.addEventListener("input", function(evt) {
    alert("Editable content changed");
}, false);

对于跨浏览器的解决方案，您可以使用各种 DOM mutation events 中的一些。 (另见 MDN )将被解雇。我建议 DOMCharacterDataModified可能还有 DOMNodeRemoved将是用于此目的的有用的。

请注意，IE <= 8 中不存在这些事件。此外，这些事件已弃用，取而代之的是 DOM4 Mutation Observers 。然而，在撰写本文时(2012 年 6 月)，只有最新的 WebKit 浏览器支持此功能，因此从中短期来看，我们至少会使用突变事件作为后备。

editableDiv.addEventListener("DOMCharacterDataModified", function(evt) {
    if (evt.newValue.length < evt.prevValue.length) {
        alert("Characters deleted");
    }
}, false);