17

我试图弄清楚是否有任何方法可以监听具有属性的 HTML 元素之类的focus事件。changecontenteditable

我有这个 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

4

4 回答 4

23

并不真地。元素没有change事件contenteditable，也没有 HTML5input事件，尽管我认为最终会出现。这是一种痛苦。

2012 年 6 月 23 日更新

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

focus但是，它确实有效，就像DOMCharacterDataModified在大多数浏览器中一样（尽管特别是 IE < 9 不适用）。见http://jsfiddle.net/UuYQH/112/

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

于 2011-10-18T09:17:03.897 回答
2

我知道这有点晚了，但 jQuery 似乎可以重点工作，看看这个例子：

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

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

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

于 2013-06-30T18:38:26.083 回答
2

模糊（当区域失去焦点时）和焦点都有效。至少使用 jQuery。使用 Chrome 28 和 Safari 6 测试。 

$("#test").blur(function(){
  $("#log").append("<li>Item lost focus</li>");
});
于 2013-07-26T17:15:55.520 回答
1

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

于 2014-01-24T09:07:18.473 回答