Javascript 侦听 contenteditable HTML 元素的事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7802784/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Listening to events of a contenteditable HTML element
提问by Mohsen
I'm trying to figure out if there is any way to listen to events like focusor changeof an HTML element with contenteditableattribute.
我试图找出是否有任何方式来听像事件focus或change与HTML元素的contenteditable属性。
I have this html markup:
我有这个 html 标记：
<p id="test" contenteditable >Hello World</p>
I've tried these without any success(JSBin):
我试过这些都没有成功（JSBin）：
var test = document.querySelector('#test');
test.addEventListener('change', function(){
alert('content edited');
}, false);
test.addEventListener('DOMCharacterDataModified', function(){
alert('content edited');
}, false);
test.addEventListener('focus', function(){
alert('content edited');
}, false);
I don't want to listen to keyboard or mouse events. I didn't find any clear documentation in W3Cand MDNabout contenteditable.
我不想听键盘或鼠标事件。我在W3C和MDN 中没有找到任何关于contenteditable.
Is it possible to listen to changeand focusor other events on a content editable HTML element?
是否可以在内容可编辑的 HTML 元素上收听change和/focus或其他事件？
回答by Tim Down
Not really. There is no changeevent for contenteditableelements, and there's no HTML5 inputevent either, although I think that will eventually appear. It's a pain.
并不真地。元素没有change事件contenteditable，也没有 HTML5input事件，尽管我认为这最终会出现。这是一种痛苦。
UPDATE 23 June 2012
2012 年 6 月 23 日更新
Recent WebKit supports the HTML5 inputevent on contenteditableelements, as does Firefox 14.
最近的 WebKit 支持元素input上的 HTML5事件contenteditable，Firefox 14 也是如此。
focus, however, does work, as does DOMCharacterDataModifiedin most browsers (though notably not IE < 9). See http://jsfiddle.net/UuYQH/112/
focus，但是，确实可以工作，就像DOMCharacterDataModified在大多数浏览器中一样（尽管 IE < 9 尤其不适用）。见http://jsfiddle.net/UuYQH/112/
By the way, contenteditableis not a Boolean attribute: it requires a value, which should be one of "true", "false", "inherit" and the empty string (which is equivalent to "true").
顺便说一下，contenteditable它不是布尔属性：它需要一个值，它应该是“true”、“false”、“inherit”和空字符串（相当于“true”）之一。
回答by Philll_t
I know this is kinda late but jQuery seems to work with focus, check this example out:
我知道这有点晚了，但 jQuery 似乎可以使用焦点，请查看此示例：
http://jsfiddle.net/powerphillg5/EGtSC/
http://jsfiddle.net/powerphillg5/EGtSC/
$("#test").focus(function(){
$("#log").append("<li>Item Focused</li>");
});
I hope this helps, but if it's not what you were looking for I will humbly accept the votes down.
我希望这会有所帮助，但如果这不是您想要的，我会虚心接受投票。
回答by pussmun
Blur (when the area loses focus) and focus both works. At least with jQuery. Tested with Chrome 28 and Safari 6.
模糊（当该区域失去焦点时）和聚焦都有效。至少使用 jQuery。使用 Chrome 28 和 Safari 6 进行测试。
$("#test").blur(function(){
$("#log").append("<li>Item lost focus</li>");
});
回答by user3231324
contenteditable was introduced way back in IE 5.5, it was supported by the JavaScript 1.1 / 1.2 API and applied first to iframes, later to DIV's. Its supported in all browsers to some degree. Now in the HTML5 spec most elements can accept this attribute (but beware backwards compatibility). onchange event support may apply still to form elements as it was originally designed, having little to do with this attribute. Your option is still keypress events, which are easy to capture and when combined with a check for the target elements focus you have a similar result to onchange. It might not be ideal for edge cases but for most use cases I would go this route and its the most backwards compatible too.
contenteditable 早在 IE 5.5 中就被引入了，它得到了 JavaScript 1.1 / 1.2 API 的支持，并首先应用于 iframe，后来应用于 DIV。所有浏览器都在某种程度上支持它。现在在 HTML5 规范中，大多数元素都可以接受这个属性（但要注意向后兼容性）。onchange 事件支持可能仍然适用于最初设计的表单元素，与此属性几乎没有关系。您的选择仍然是按键事件，它们很容易捕获，并且当与目标元素的检查结合使用时，您会得到与 onchange 类似的结果。它可能不适合边缘情况，但对于大多数用例，我会走这条路线，而且它也是最向后兼容的。
