这个帖子在我调查这个主题的时候非常有帮助。

我把这里的一些代码修改成一个jQuery插件，这样它就可以以一种可重用的形式使用，主要是为了满足我的需求，但其他人可能更喜欢一个简单的界面来使用可满足的标记。

https://gist.github.com/3410122

更新:

由于其日益流行的插件已被Makesites.org采用

发展将从这里开始:

https://github.com/makesites/jquery-contenteditable

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

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

创建一个快速的jQuery contentteditable插件

两个选择:

1)对于现代(常青树)浏览器: “输入”事件将充当另一个“更改”事件。

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

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

or

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

非JQuery回答…

function makeEditable(elem){
    elem.setAttribute('contenteditable', 'true');
    elem.addEventListener('blur', function (evt) {
        elem.removeAttribute('contenteditable');
        elem.removeEventListener('blur', evt.target);
    });
    elem.focus();
}

要使用它，调用(比如说)一个id="myHeader"的头元素

makeEditable(document.getElementById('myHeader'))

该元素现在可以由用户编辑，直到失去焦点。

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 / >

在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例子