监听可编辑 HTML 元素的事件
我试图弄清楚是否有任何方法可以监听具有 contenteditable 属性的 HTML 元素的 focus 或 change 等事件。
我有这个 html 标记：
<p id="test" contenteditable >Hello World</p>
我尝试过这些但没有成功(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);
我不想监听键盘或鼠标事件。我在 W3C 和 MDN 关于 contenteditable。
是否可以监听内容可编辑 HTML 元素上的 change 和 focus 或其他事件？
I'm trying to figure out if there is any way to listen to events like focus or change of an HTML element with contenteditable attribute.
I have this html markup:
<p id="test" contenteditable >Hello World</p>
I've tried these without any success(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 W3C and MDN about contenteditable.
Is it possible to listen to change and focus or other events on a content editable HTML element?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
并不真地。
contenteditable元素没有change事件，也没有 HTML5input事件，尽管我认为最终会出现。很痛苦。更新于 2012 年 6 月 23 日
最近的 WebKit 支持
contenteditable元素上的 HTML5input事件，Firefox 14 也是如此。focus，但是，它确实有效，就像大多数浏览器中的DOMCharacterDataModified一样（但值得注意的是 IE < 9 除外）。请参阅 http://jsfiddle.net/UuYQH/112/顺便说一句，
contenteditable不是布尔属性：它需要一个值，该值应该是“true”、“false”、“inherit”之一和空字符串（相当于“true”）。Not really. There is no
changeevent forcontenteditableelements, and there's no HTML5inputevent either, although I think that will eventually appear. It's a pain.UPDATE 23 June 2012
Recent WebKit supports the HTML5
inputevent oncontenteditableelements, as does Firefox 14.focus, however, does work, as doesDOMCharacterDataModifiedin most browsers (though notably not IE < 9). See 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").我知道这有点晚了，但 jQuery 似乎可以集中工作，请查看以下示例：
http://jsfiddle.net /powerphillg5/EGtSC/
我希望这会有所帮助，但如果这不是您想要的，我会谦虚地接受否决票。
I know this is kinda late but jQuery seems to work with focus, check this example out:
http://jsfiddle.net/powerphillg5/EGtSC/
I hope this helps, but if it's not what you were looking for I will humbly accept the votes down.
模糊（当该区域失去焦点时）和聚焦都有效。至少使用 jQuery 是这样。
使用 Chrome 28 和 Safari 6 进行测试。
Blur (when the area loses focus) and focus both works. At least with jQuery.
Tested with Chrome 28 and Safari 6.
contenteditable 早在 IE 5.5 中就被引入了，它受到 JavaScript 1.1 / 1.2 API 的支持，并首先应用于 iframe，后来应用于 DIV。所有浏览器都在某种程度上支持它。现在，在 HTML5 规范中，大多数元素都可以接受此属性（但要注意向后兼容性）。 onchange 事件支持可能仍适用于最初设计的表单元素，与此属性关系不大。您的选择仍然是按键事件，这些事件很容易捕获，并且与检查目标元素焦点结合使用时，您会得到与 onchange 类似的结果。对于边缘情况来说，它可能并不理想，但对于大多数用例，我会走这条路，而且它也是最向后兼容的。
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.