Warten auf Ereignisse von einer HTML contenteditable-element

Ich versuche, herauszufinden, ob es irgendeinen Weg gibt, zu hören, zu Veranstaltungen wie focus oder change eines HTML-Elements mit contenteditable Attribut.

Habe ich diese html-markup:

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

Habe ich versucht, diese ohne Erfolg(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);

Ich will nicht hören, Tastatur oder Maus-Ereignisse. Ich nicht finden, eine klare Dokumentation in W3C und MDN über contenteditable.

Ist es möglich, zu hören change und focus oder sonstige Ereignisse, die auf einem content-editable HTML-element?

InformationsquelleAutor der Frage Mohsen | 2011-10-18

  1. 22

    Nicht wirklich. Es gibt keine change Ereignis für contenteditable Elemente, und es gibt keine HTML5 input - Ereignis, obwohl ich denke, dass wird irgendwann erscheinen. Es ist ein Schmerz.

    UPDATE 23 Juni 2012

    Letzten WebKit unterstützt das HTML5 - input Veranstaltung auf contenteditable Elemente, wie Firefox 14.

    focus jedoch funktioniert, wie Sie funktioniert DOMCharacterDataModified in den meisten Browsern (aber vor allem nicht den Internet Explorer < 9). Sehen http://jsfiddle.net/UuYQH/112/

    Übrigens contenteditable ist nicht ein Boolean-Attribut: es muss ein Wert angegeben werden, der sollte auf "true", "false", "Erben" und einem leeren string (das entspricht "true").

    InformationsquelleAutor der Antwort Tim Down

  2. 2

    Ich weiß, das ist ein bisschen spät, aber jQuery scheint zu funktionieren mit dem Fokus, schauen Sie dieses Beispiel:

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

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

    Ich hoffe das hilft, aber wenn es ist nicht, was Sie suchen, werde ich demütig akzeptieren die Stimmen nach unten.

    InformationsquelleAutor der Antwort Philll_t

  3. 1

    Blur (wenn das Gebiet verliert den Fokus) und fokussieren Sie beide arbeiten. Zumindest mit jQuery.
    Getestet mit Chrome 28 und Safari 6. 

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

    InformationsquelleAutor der Antwort pussmun

  4. 1

    contenteditable eingeführt wurde, Weg zurück im IE 5.5, unterstützt wurde Sie dabei durch die JavaScript-1.1 /1.2-API und zuerst angewendet, um iframes, später DIV. Ihr unterstützt in allen Browsern bis zu einem gewissen Grad. Jetzt in der HTML5-Spezifikation sind die meisten Elemente annehmen können dieses Attribut (aber Vorsicht rückwärts-Kompatibilität). onchange-Ereignis Unterstützung vielleicht noch gelten für die Elemente bilden, wie es ursprünglich konzipiert, haben wenig zu tun mit diesem Attribut. Ihre Wahl ist immer noch der Tastendruck-Ereignisse, die einfach sind zu erfassen und, wenn kombiniert mit einem Kontrollkästchen für die Ziel-Elemente konzentrieren, die Sie haben, ein ähnliches Ergebnis zu onchange. Es ist vielleicht nicht ideal für Sonderfälle aber für die meisten Anwendungsfälle würde ich diesen Weg gehen, und es ist rückwärts kompatibel zu.

    InformationsquelleAutor der Antwort user3231324

Schreibe einen Kommentar