聆听可内容HTML元素的事件 [英] Listening to events of a contenteditable HTML element

问题描述

我想弄清楚是否有任何方式听取焦点或更改之类的事件一个具有 contenteditable 属性的HTML元素。

我有这个html标记：

 < p id =testcontenteditable> 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 中找到任何明确的文档， a>和 MDN 关于 contenteditable 。

是否可以收听更改和焦点或内容可编辑HTML元素上的其他事件？

解决方案

不是真的。没有更改事件为 contenteditable 元素，并且没有HTML5 输入事件，尽管我认为最终会出现。这是一个痛苦。

---

2012年6月23日更新

最近的WebKit支持在 contenteditable 元素上的HTML5 输入事件，Firefox 14也是如此。 p>

---

焦点，但是， c> DOMCharacterDataModified 在大多数浏览器（虽然显着不是IE< 9）。请参阅 http://jsfiddle.net/UuYQH/112/

顺便说一句， contenteditable 不是一个布尔属性：它需要一个值，它应该是true，false，inherit和空字符串之一（相当于true）。

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?

解决方案

Not really. There is no change event for contenteditable elements, and there's no HTML5 input event either, although I think that will eventually appear. It's a pain.

---

UPDATE 23 June 2012

Recent WebKit supports the HTML5 input event on contenteditable elements, as does Firefox 14.

---

focus, however, does work, as does DOMCharacterDataModified in most browsers (though notably not IE < 9). See http://jsfiddle.net/UuYQH/112/

By the way, contenteditable is 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").

这篇关于聆听可内容HTML元素的事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！