Inhaltsveränderbare Änderungsereignisse

Question

Ich möchte eine Funktion ausführen, wenn ein Benutzer den Inhalt eines div con contenteditable Attribut. Was ist das Äquivalent eines onchange Veranstaltung?

Ich verwende jQuery, daher ist jede Lösung, die jQuery verwendet, vorzuziehen. Danke!

Answer 1

Aktualisierung 2022

Wie in den Kommentaren hervorgehoben wurde, beantwortet dies nicht die gestellte Frage, die nach dem Äquivalent der change Ereignis und nicht das input Veranstaltung. Ich belasse es aber dabei.

Ursprüngliche Antwort

Ich würde vorschlagen, Hörer an Schlüsselereignisse anzuhängen, die durch das bearbeitbare Element ausgelöst werden, obwohl Sie sich bewusst sein müssen, dass keydown y keypress Ereignisse ausgelöst werden, bevor der Inhalt selbst geändert wird. Dies deckt nicht alle Möglichkeiten ab, den Inhalt zu ändern: Der Benutzer kann auch Ausschneiden, Kopieren und Einfügen aus den Menüs Bearbeiten oder Kontextbrowser verwenden, so dass Sie die cut copy y paste Ereignisse zu. Außerdem kann der Benutzer Text oder andere Inhalte ablegen, so dass es dort mehr Ereignisse gibt ( mouseup zum Beispiel). Als Ausweichlösung können Sie den Inhalt des Elements abfragen.

UPDATE 29. Oktober 2014

En HTML5 input Veranstaltung ist die Antwort auf lange Sicht. Zum Zeitpunkt der Erstellung dieses Berichts wird es unterstützt für contenteditable Elemente in aktuellen Mozilla- (ab Firefox 14) und WebKit/Blink-Browsern, aber nicht im IE.

Demo:

document.getElementById("editor").addEventListener("input", function() {
    console.log("input event fired");
}, false);

<div contenteditable="true" id="editor">Please type something in here</div>

Demo: http://jsfiddle.net/ch6yn/2691/

Answer 2

Hier ist eine effizientere Version, die Folgendes verwendet on für alle Content-Editables. Sie basiert auf den Top-Antworten hier.

$('body').on('focus', '[contenteditable]', function() {
    const $this = $(this);
    $this.data('before', $this.html());
}).on('blur keyup paste input', '[contenteditable]', function() {
    const $this = $(this);
    if ($this.data('before') !== $this.html()) {
        $this.data('before', $this.html());
        $this.trigger('change');
    }
});

Das Projekt ist hier: https://github.com/balupton/html5edit

Answer 3

Erwägen Sie die Verwendung von MutationObserver . Diese Beobachter sind so konzipiert, dass sie auf Änderungen im DOM reagieren und einen leistungsfähigen Ersatz für Mutationsereignisse .

Vorteile:

• Brennt, wenn jede Veränderung auftritt, was durch das Abhören von Schlüsselereignissen, wie es in anderen Antworten vorgeschlagen wurde, schwer zu erreichen ist. Zum Beispiel funktionieren alle diese Funktionen gut: Drag & Drop, Kursivschrift, Kopieren/Ausschneiden/Einfügen über das Kontextmenü.
• Entwickelt mit dem Gedanken an Leistung.
• Einfacher, unkomplizierter Code. Es ist viel einfacher, einen Code zu verstehen und zu debuggen, der auf ein Ereignis reagiert, als einen Code, der auf 10 Ereignisse reagiert.
• Google hat eine ausgezeichnete Mutationsübersichtsbibliothek was die Verwendung von MutationObservern sehr einfach macht.

Nachteile:

• Erfordert eine sehr aktuelle Version von Firefox (14.0+), Chrome (18+) oder IE (11+).
• Neue API zu verstehen
• Es gibt noch nicht viele Informationen über bewährte Verfahren oder Fallstudien

Erfahren Sie mehr:

• Ich schrieb eine kleine Schnipsel um die Verwendung von MutationObserern mit der Handhabung einer Vielzahl von Ereignissen zu vergleichen. Ich habe baluptons Code verwendet, da sein Antwort hat die meisten positiven Bewertungen.
• Mozilla hat eine ausgezeichnete Seite über die API
• Werfen Sie einen Blick auf die MutationSummary Bibliothek

Answer 4

nicht jQuery schnell und schmutzig Antwort:

function setChangeListener (div, listener) {

    div.addEventListener("blur", listener);
    div.addEventListener("keyup", listener);
    div.addEventListener("paste", listener);
    div.addEventListener("copy", listener);
    div.addEventListener("cut", listener);
    div.addEventListener("delete", listener);
    div.addEventListener("mouseup", listener);

}

var div = document.querySelector("someDiv");

setChangeListener(div, function(event){
    console.log(event);
});

Answer 5

Ich habe lawwantsin 's Antwort wie so geändert und dies funktioniert für mich. Ich verwende das keyup-Ereignis anstelle von keypress, was gut funktioniert.

$('#editor').on('focus', function() {
  before = $(this).html();
}).on('blur keyup paste', function() { 
  if (before != $(this).html()) { $(this).trigger('change'); }
});

$('#editor').on('change', function() {alert('changed')});