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＆lt; = 8中不存在这些事件。此外，这些事件已被弃用，而不是DOM4 Mutation Observers 。然而，在撰写本文时（2012年6月），只有非常近期的WebKit浏览器才支持这一点，因此对于中短期内我们会将突变事件作为最低限度的回退。

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

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

1 个答案: