聽一個CONTENTEDITABLE HTML元素

我想弄清楚的事件，如果有任何的方式來聽像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或其他事件？

來源

2011-10-18 Mohsen

簽出這個問題的第二個答案.http：//stackoverflow.com/questions/1391278/contenteditable-change-events – rwilliams

不是。 contenteditable元素沒有change事件，也沒有HTML5 input事件，儘管我認爲這將最終出現。這是一個痛苦。

UPDATE 2012年6月23日

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

focus，但是，沒有工作一樣，DOMCharacterDataModified在大多數瀏覽器中（儘管顯然不是IE < 9）。請參閱http://jsfiddle.net/UuYQH/112/

順便說一句，contenteditable不是布爾型屬性：它需要一個值，它應該是「true」，「false」，「inherit」和空字符串之一（相當於「true」）。

來源

2011-10-18 09:17:03

謝謝，你的小提琴在我的Chrome中不起作用。此外'contenteditable'是正確的基於文檔我認爲 – Mohsen

@Mohsen：在Chrome中適用於我。它可能並不清楚，但想法是在頂部輸入contenteditable div而不是texarea，這是記錄事件的地方。 –

@Mohsen：我應該爲'contenteditable'屬性添加HTML5規範的鏈接。它是：http://www.w3.org/TR/html5/editing.html#contenteditable –

我知道這是有點晚，但jQuery的似乎有重點的工作，看看這個例子了：

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

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

我希望這可以幫助，但如果它不是你要找什麼，因爲我會虛心接受這個選票。

來源

2013-06-30 18:38:26

模糊（當該區域失去焦點）並集中這兩個作品。至少在jQuery中。使用Chrome 28和Safari 6.

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

來源

2013-07-26 17:15:55 pussmun

CONTENTEDITABLE引入歸途中IE 5.5測試，它是由JavaScript 1.1/1.2 API和第一施加到內部框架，稍後DIV的支撐。它在一定程度上支持所有瀏覽器。現在，在HTML5規範中，大多數元素都可以接受這個屬性（但要注意向後兼容）。 onchange事件支持可能仍然適用於形成最初設計的元素，與此屬性幾乎沒有關係。你的選擇仍然是按鍵事件，這很容易捕捉，當與目標元素檢查相結合時，你對onchange有類似的結果。它可能不是理想的邊緣案例，但對於大多數使用情況，我會走這條路線，也是最向後兼容的。

來源

2014-01-24 09:07:18 user3231324

聽一個CONTENTEDITABLE HTML元素

回答

相關問題