javascript - contenteditable 更改事件

Question

当用户使用 contenteditable 属性编辑 div 的内容时，我想运行一个函数。 onchange 事件的等价物是什么？

我正在使用 jQuery，因此任何使用 jQuery 的解决方案都是首选。谢谢!

Answer 1

2022 年更新

正如评论中所指出的，这并不能回答所提出的问题，即需要等效于 change 事件而不是 input 事件。但是，我将保留原样。

原答案

我建议将监听器附加到可编辑元素触发的关键事件，但您需要注意 keydown 和 keypress 事件在内容本身被触发之前被触发改变了。这不会涵盖更改内容的所有可能方式:用户还可以使用编辑或上下文浏览器菜单中的剪切、复制和粘贴，因此您可能需要处理 cut copy 和 paste 事件。此外，用户可以放置文本或其他内容，因此那里有更多事件(例如，mouseup)。您可能希望轮询元素的内容作为后备。

2014 年 10 月 29 日更新

HTML5 input event是长期的答案。在撰写本文时，当前 Mozilla(来自 Firefox 14)和 WebKit/Blink 浏览器中的 contenteditable 元素支持它，但不支持 IE。

演示:

document.getElementById("editor").addEventListener("input", function() {
    console.log("input event fired");
}, false);

<div contenteditable="true" id="editor">Please type something in here</div>

演示:http://jsfiddle.net/ch6yn/2691/