[英]Listening to events of a contenteditable HTML element
我試圖弄清楚是否有任何方式來監聽focus
或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
事件,也沒有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”)之一。
我知道這有點晚了但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的支持,並首先應用於iframe,后來應用於DIV。 它在某種程度上支持所有瀏覽器。 現在在HTML5規范中,大多數元素都可以接受這個屬性(但要注意向后兼容性)。 onchange事件支持仍然可以應用於最初設計的元素,與此屬性幾乎沒有關系。 您的選項仍然是按鍵事件,這些事件很容易捕獲,當與目標元素重點檢查結合使用時,您可以獲得與onchange類似的結果。 它可能不是理想的邊緣情況,但對於大多數用例,我會走這條路線,它也是最向后兼容的。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.