在MutationEvents下使用domcharacterdatmodified会导致同样的结果。超时设置是为了防止发送错误的值(例如，在Chrome中，我有一些空格键的问题)

var timeoutID;
$('[contenteditable]').bind('DOMCharacterDataModified', function() {
    clearTimeout(timeoutID);
    $that = $(this);
    timeoutID = setTimeout(function() {
        $that.trigger('change')
    }, 50)
});
$('[contentEditable]').bind('change', function() {
    console.log($(this).text());
})

JSFIDDLE例子

这里有一个更有效的版本，它对所有可内容使用on。这是基于上面的答案。

$('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

2022年更新

正如评论中所指出的，这并没有回答所提出的问题，即需要更改事件而不是输入事件的等价物。不过，我还是把它留在这里吧。

原来的答案

I'd suggest attaching listeners to key events fired by the editable element, though you need to be aware that keydown and keypress events are fired before the content itself is changed. This won't cover every possible means of changing the content: the user can also use cut, copy and paste from the Edit or context browser menus, so you may want to handle the cut copy and paste events too. Also, the user can drop text or other content, so there are more events there (mouseup, for example). You may want to poll the element's contents as a fallback.

2014年10月29日更新

从长远来看，HTML5输入事件是答案。在撰写本文时，当前的Mozilla(来自Firefox 14)和WebKit/Blink浏览器支持可满足的元素，但不支持IE。

演示:

. getelementbyid(“编辑器”)。addEventListener("input"， function() { Console.log("触发的输入事件"); },假); <div contentteditable ="true" id="editor">请在这里输入一些内容</div>

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

onchange事件不会在具有contentEditable属性的元素被更改时触发，建议的方法是添加一个按钮，以“保存”版本。

检查这个插件，它以这种方式处理问题:

创建一个快速的jQuery contentteditable插件

const p = document.querySelector('p') const result = document.querySelector('div') const观察者= new MutationObserver((mutationRecords) => { 结果。textContent = mutationRecords[0].target.data / /结果。textContent = p.textContent }) 观察者。观察(p, { characterData:没错, 子树:没错, }) abc contenteditable < p > < / p > < div / >

为了避免计时器和“保存”按钮，你可以使用blur事件，当元素失去焦点时触发。但是为了确保元素确实被改变了(不仅仅是聚焦和散焦)，它的内容应该与它的上一个版本进行比较。或者使用keydown事件在这个元素上设置一些“脏”标志。