簡體   English   中英

聆聽可信的HTML元素的事件

[英]Listening to events of a contenteditable HTML element

我試圖弄清楚是否有任何方式來監聽focuschange具有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);

我不想聽鍵盤或鼠標事件。 我沒有在W3CMDN中找到任何關於contenteditable明確文檔。

是否可以在內容可編輯HTML元素上收聽changefocus或其他事件?

並不是的。 對於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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM