获取已编辑元素的删除事件

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 这些事件已弃用，取而代之的是 DOM4 Mutation Observers。然而，在撰写本文时（2012 年 6 月），只有最近的 WebKit 浏览器支持这一点，因此在中短期内，我们至少会使用突变事件作为后备。

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