听一个CONTENTEDITABLE HTML元素

  • Z时代
  • 2024-01-10
  • 分类：问答

我想弄清楚的事件，如果有任何的方式来听像focus或contenteditable属性的HTML元素的change事件。听一个CONTENTEDITABLE HTML元素

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

回答：

不是。 contenteditable元素没有change事件，也没有HTML5input事件，尽管我认为这将最终出现。这是一个痛苦。

UPDATE 2012年6月23日

最新的WebKit支持在contenteditable元素HTML5 input事件一样，火狐14

focus，但是，没有工作一样，DOMCharacterDataModified在大多数浏览器中（尽管显然不是IE < 9）。请参阅http://jsfiddle.net/UuYQH/112/

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

回答：

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

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

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

我希望这可以帮助，但如果它不是你要找什么，因为我会虚心接受这个选票。

回答：

模糊（当该区域失去焦点）并集中这两个作品。至少在jQuery中。 使用Chrome 28和Safari 6.

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

回答：

CONTENTEDITABLE引入归途中IE 5.5测试，它是由JavaScript 1.1/1.2 API和第一施加到内部框架，稍后DIV的支撑。它在一定程度上支持所有浏览器。现在，在HTML5规范中，大多数元素都可以接受这个属性（但要注意向后兼容）。 onchange事件支持可能仍然适用于形成最初设计的元素，与此属性几乎没有关系。你的选择仍然是按键事件，这很容易捕捉，当与目标元素检查相结合时，你对onchange有类似的结果。它可能不是理想的边缘案例，但对于大多数使用情况，我会走这条路线，也是最向后兼容的。

以上是 听一个CONTENTEDITABLE HTML元素 的全部内容， 来源链接： utcz.com/qa/261220.html

回到顶部