Question

我正在尝试弄清楚是否有任何方式可以使用focus属性来监听HTML元素的change或contenteditable等事件。

我有这个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或其他事件？

Answer 1

不是真的。 change元素没有contenteditable个事件，也没有HTML5 input事件，尽管我认为最终会出现这种情况。这是一种痛苦。

2012年6月23日更新

最近的WebKit支持input元素上的HTML5 contenteditable事件，Firefox 14也是如此。

然而，

focus和大多数浏览器中的DOMCharacterDataModified一样有效（尽管不是IE＆lt; 9）。见http://jsfiddle.net/UuYQH/112/

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

Answer 2

我知道这有点晚了但jQuery似乎与焦点一起工作，请查看这个例子：

http://jsfiddle.net/powerphillg5/EGtSC/

$("#test").focus(function(){
     $("#log").append("<li>Item Focused</li>");
});

我希望这会有所帮助，但如果不是你想要的话，我会谦卑地接受投票。

Answer 3

模糊（当区域失去焦点时）并将焦点都集中在一起。至少用jQuery。使用Chrome 28和Safari 6进行测试。

$("#test").blur(function(){
  $("#log").append("<li>Item lost focus</li>");
});

Answer 4

contenteditable是在IE 5.5中引入的，它得到了JavaScript 1.1 / 1.2 API的支持，并首先应用于iframe，后来应用于DIV。它在某种程度上支持所有浏览器。现在在HTML5规范中，大多数元素都可以接受这个属性（但要注意向后兼容性）。 onchange事件支持仍然可以应用于最初设计的元素，与此属性几乎没有关系。您的选项仍然是按键事件，这些事件很容易捕获，当与目标元素重点检查结合使用时，您可以获得与onchange类似的结果。它可能不是理想的边缘情况，但对于大多数用例，我会走这条路线，也是最向后兼容的。

聆听可信的HTML元素的事件

4 个答案: