一尘不染

JavaScript可编辑的变更事件

javascript

当用户编辑divwith contenteditable属性的内容时,我想运行一个函数。什么相当于一个onchange事件?

我使用的是jQuery,因此首选使用jQuery的解决方案。谢谢!


阅读 343

收藏
2020-04-25

共1个答案

一尘不染

我建议将侦听器附加到由editable元素触发的关键事件上,尽​​管您需要注意,keydown并且keypress在更改内容本身之前会触发事件。这不会涵盖更改内容的所有可能方法:用户还可以从“编辑”或上下文浏览器菜单中使用剪切,复制和粘贴,因此您可能也想处理cut
copypaste事件。此外,用户可以放置文本或其他内容,因此在那里有更多事件(mouseup例如,)。您可能希望轮询元素的内容作为后备。

2014年10月29日更新

。在撰写本文时,contenteditable当前Mozilla(来自Firefox14)和WebKit/Blink浏览器中的元素均支持该功能,但IE不支持。

演示:

document.getElementById("editor").addEventListener("input", function() {

    console.log("input event fired");

}, false);


<div contenteditable="true" id="editor">Please type something in here</div>
2020-04-25