Odsłuchiwanie zdarzeń z elementu contenteditable HTML

Question

Próbuję dowiedzieć się, czy istnieje sposób wysłuchania zdarzeń takich jak focus lub change elementu HTML z atrybutem contenteditable.

mam ten znaczników HTML:

<p id="test" contenteditable >Hello World</p> 

próbowałam je bez powodzenia (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); 

nie chcę słuchać klawiatura lub mysz zdarzeń. Nie znalazłem żadnej jasnej dokumentacji w W3C i MDN o contenteditable.

Czy można słuchać change i focus lub innych wydarzeń w edytowalnym elemencie treści?

Answer 1

Niezupełnie. Nie ma elementu change dla elementów contenteditable i nie ma też zdarzenia HTML5 input, chociaż myślę, że ostatecznie się pojawi. To ból.

---

UPDATE 23 czerwca 2012

Najnowsze WebKit obsługuje zdarzenie HTML5 input na contenteditable elementów, podobnie jak Firefox 14.

---

focus jednak działa, podobnie jak DOMCharacterDataModified w większości przeglądarek (choć w szczególności nie IE < 9). Zobacz: http://jsfiddle.net/UuYQH/112/

Nawiasem mówiąc, contenteditable nie jest atrybutem boolowskim: wymaga wartości, która powinna być jedną z "true", "false", "dziedziczymy" i pusty ciąg znaków (co jest równoważne "true").

Answer 2

Wiem, że to trochę późno, ale jQuery wydaje się działać z naciskiem, sprawdź ten przykład z:

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

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

Mam nadzieję, że to pomoże, ale jeśli to nie jest to, czego szukaliśmy I z pokorą przyjmie głosy w dół.

Answer 3

Rozmycie (gdy obszar traci ostrość) i skupienie obu prac. Przynajmniej z jQuery. Testowane z Chrome 28 i Safari 6.

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

Answer 4

contenteditable został wprowadzony w drodze powrotnej w IE 5.5, to był wspierany przez JavaScript 1.1/1.2 API i zastosowano pierwszy iframe, później do div. Obsługiwany we wszystkich przeglądarkach w pewnym stopniu. Teraz w specyfikacji HTML5 większość elementów może zaakceptować ten atrybut (ale uważaj na kompatybilność wsteczną). Obsługa zdarzeń onchange może nadal być stosowana do tworzenia elementów zgodnie z pierwotnym projektem, mając niewiele wspólnego z tym atrybutem. Twoja opcja to nadal zdarzenia typu keypress, które są łatwe do przechwycenia, a po połączeniu z sprawdzeniem, czy elementy docelowe są skupione, masz podobny efekt do zmiany. To może nie być idealne dla przypadków krawędziowych, ale w większości przypadków skorzystam z tej trasy i jej zgodności z poprzednimi wersjami.