监听一个可编辑的HTML元素的事件

Question

我正在尝试找出是否有一种方法可以监听具有 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 或其他事件？

- Mohsen

---

请查看此问题的第二个答案。https://dev59.com/N3M_5IYBdhLWcg3waSX9 - rwilliams

Answer 1

并不是。对于 contenteditable 元素，没有 change 事件，也没有 HTML5 的 input 事件，尽管我认为最终会出现这个事件。这很麻烦。

---

更新于 2012 年 6 月 23 日

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

---

然而，focus 是有效的，大多数浏览器上也支持 DOMCharacterDataModified（但 IE < 9 不支持）。参见 http://jsfiddle.net/UuYQH/112/

顺便说一下，contenteditable 不是布尔属性：它需要一个值，该值应为 "true"、"false"、"inherit" 和空字符串（等同于 "true"）之一。

- Tim Down

---

谢谢，你的代码片段在我的Chrome中无法工作。根据文档，contenteditable是正确的。 - Mohsen

@Mohsen：在Chrome中对我有效。可能不是很清楚，但是想法是在顶部的可编辑div中键入内容，而不是textarea，后者用于记录事件。 - Tim Down

@Mohsen：我应该在contenteditable属性的HTML5规范中添加一个链接。这是链接：http://www.w3.org/TR/html5/editing.html#contenteditable - Tim Down

似乎它已经改变了，它以前是我写的那样。不管怎样，没有任何值的contenteditable功能正常工作。 - Mohsen

@Mohsen：我认为它没有改变。我在Chrome上已经偶尔使用这些事件很长一段时间了。 - Tim Down

你的代码有点误导性，我在<textarea/>元素中输入了内容，但什么也没有发生，后来我才发现自己输入到了错误的区域。 - ThemeZ

Answer 2

我知道这有点晚了，但是jQuery似乎可以使用焦点，看看这个例子： http://jsfiddle.net/powerphillg5/EGtSC/

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

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

- Philll_t

Answer 3

模糊（当区域失去焦点）和聚焦都可以使用。至少在jQuery中是这样的。 已在Chrome 28和Safari 6中进行了测试。

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

- pussmun

---

这绝对是最有帮助的答案。 - Talha Imam

Answer 4

contenteditable属性最早在IE 5.5中引入，它由JavaScript 1.1 / 1.2 API支持，并首先应用于iframe，后来才应用于DIV。它在所有浏览器中都得到了一定程度的支持。现在，在HTML5规范中，大多数元素都可以接受此属性（但要注意向后兼容性）。onchange事件支持仍然适用于表单元素，因为它最初是设计用于表单元素的，与此属性没有太大关系。你的选择仍然是keypress事件，这很容易捕获，并且当与检查目标元素的焦点结合使用时，你会得到类似于onchange的结果。对于大多数用例而言，这可能不是理想的解决方案，但我会选择这种方式，因为它最具备向后兼容性。

- user3231324