可编辑的变更事件

JavaScript HTML

村村

2020-03-23

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

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

第2987篇《可编辑的变更事件》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

3个回答
Tony凯 2020.03.23

非jQuery快速又肮脏的答案:

function setChangeListener (div, listener) {

    div.addEventListener("blur", listener);
    div.addEventListener("keyup", listener);
    div.addEventListener("paste", listener);
    div.addEventListener("copy", listener);
    div.addEventListener("cut", listener);
    div.addEventListener("delete", listener);
    div.addEventListener("mouseup", listener);

}

var div = document.querySelector("someDiv");

setChangeListener(div, function(event){
    console.log(event);
});
Stafan泡芙 2020.03.23

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

2014年10月29日更新

从长远来看HTML5 input事件是答案。在撰写本文时,contenteditable当前Mozilla(来自Firefox 14)和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>

Demo: http://jsfiddle.net/ch6yn/2691/

飞云 2020.03.23

考虑使用MutationObserver这些观察者旨在对DOM中的更改做出反应,并作为对Mutation Events的有效替代

优点:

  • 发生任何更改时触发,这很难通过听其他答案建议的关键事件来实现。例如,所有这些都很好用:通过上下文菜单拖放,斜体,复制/剪切/粘贴。
  • 设计时注重性能。
  • 简单,直接的代码。与侦听10个事件的代码相比,理解和调试侦听一个事件的代码要容易得多。
  • Google拥有出色的突变摘要库,这使使用MutationObservers非常容易。

缺点:

  • 需要最新版本的Firefox(14.0 +),Chrome(18+)或IE(11+)。
  • 需要了解的新API
  • 关于最佳实践或案例研究的信息还很多

学到更多:

  • 我写了一个小片段来比较使用MutationObserers处理各种事件。我使用balupton的代码,因为他的回答最多。
  • Mozilla在API上有一个很棒的页面
  • 看看MutationSummary

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android