令人满意的变革事件

Question

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

我正在使用jQuery,所以任何使用jQuery的解决方案都是首选.谢谢!

Answer 1

我建议将侦听器附加到可编辑元素触发的关键事件,尽管您需要注意keydown并keypress在更改内容本身之前触发事件.这不会涵盖更改内容的所有可能方法:用户还可以使用编辑或上下文浏览器菜单中的剪切,复制和粘贴,因此您可能也想要处理cut copy和paste事件.此外,用户可以删除文本或其他内容,因此那里有更多事件(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>

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

Answer 2

这是一个更有效的版本,on用于所有contenteditables.它基于这里的最佳答案.

$('body').on('focus', '[contenteditable]', function() {
    const $this = $(this);
    $this.data('before', $this.html());
}).on('blur keyup paste input', '[contenteditable]', function() {
    const $this = $(this);
    if ($this.data('before') !== $this.html()) {
        $this.data('before', $this.html());
        $this.trigger('change');
    }
});

该项目在这里:https://github.com/balupton/html5edit

Answer 3

考虑使用MutationObserver.这些观察者旨在对DOM中的变化做出反应,并作为Mutation Events的高效替代品.

优点:

• 当发生任何变化时触发,这很难通过听取其他答案建议的关键事件来实现.例如,所有这些都运行良好:拖放,斜体,通过上下文菜单复制/剪切/粘贴.
• 设计时考虑到性能.
• 简单,直接的代码.理解和调试侦听一个事件的代码比听取10个事件的代码要容易得多.
• Google有一个出色的变异汇总库,可以很容易地使用MutationObservers.

缺点:

• 需要最新版本的Firefox(14.0+),Chrome(18+)或IE(11+).
• 要理解的新API
• 目前还没有关于最佳实践或案例研究的大量信息

学到更多:

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

Answer 4

非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);
});

Answer 5

我修改了lawwantsin的答案,这对我有用.我使用keyup事件而不是keypress工作得很好.

$('#editor').on('focus', function() {
  before = $(this).html();
}).on('blur keyup paste', function() { 
  if (before != $(this).html()) { $(this).trigger('change'); }
});

$('#editor').on('change', function() {alert('changed')});

Answer 6

两种选择：

1）对于现代（常绿）浏览器： “输入”事件将充当替代“更改”事件。

https://developer.mozilla.org/en-US/docs/Web/Events/input

document.querySelector('div').addEventListener('input', (e) => {
    // Do something with the "change"-like event
});

或者

<div oninput="someFunc(event)"></div>

或（使用 jQuery）

$('div').on('click', function(e) {
    // Do something with the "change"-like event
});

2）考虑到 IE11 和现代（常绿）浏览器： 这会监视 div 中的元素更改及其内容。

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

var div = document.querySelector('div');
var divMO = new window.MutationObserver(function(e) {
    // Do something on change
});
divMO.observe(div, { childList: true, subtree: true, characterData: true });

Answer 7

const p = document.querySelector('p')
const result = document.querySelector('div')
const observer = new MutationObserver((mutationRecords) => {
  result.textContent = mutationRecords[0].target.data
  // result.textContent = p.textContent
})
observer.observe(p, {
  characterData: true,
  subtree: true,
})

<p contenteditable>abc</p>
<div />