Ich möchte eine Funktion ausführen, wenn ein Benutzer den Inhalt eines div
with- contenteditable
Attributs bearbeitet . Was entspricht einer onchange
Veranstaltung?
Ich verwende jQuery, daher werden alle Lösungen bevorzugt, die jQuery verwenden. Vielen Dank!
javascript
jquery
html
contenteditable
Jourkey
quelle
quelle
document.getElementById("editor").oninput = function() { ...}
.Antworten:
Ich würde Anbringen Hörer vorschlagen zu den wichtigsten Veranstaltungen des editierbaren Element gefeuert, obwohl Sie müssen sich bewusst sein , dass
keydown
undkeypress
Ereignisse ausgelöst werden , bevor der Inhalt selbst geändert wird. Dies deckt nicht alle Möglichkeiten zum Ändern des Inhalts ab: Der Benutzer kann auch das Ausschneiden, Kopieren und Einfügen aus den Menüs Bearbeiten oder Kontextbrowser verwenden, sodass Sie möglicherweise auch die Ereignissecut
copy
und behandeln möchtenpaste
. Außerdem kann der Benutzer Text oder anderen Inhalt ablegen, sodass dort (mouseup
zum Beispiel) mehr Ereignisse vorhanden sind . Möglicherweise möchten Sie den Inhalt des Elements als Fallback abfragen.UPDATE 29. Oktober 2014
Das HTML5-
input
Ereignis ist langfristig die Antwort. Zum Zeitpunkt des Schreibens wird es fürcontenteditable
Elemente in aktuellen Mozilla- (ab Firefox 14) und WebKit / Blink-Browsern unterstützt, jedoch nicht für IE.Demo:
Demo: http://jsfiddle.net/ch6yn/2691/
quelle
cut
,copy
undpaste
Ereignisse in Browsern , die sie unterstützen (IE 5+, Firefox 3.0+, Safari 3+, Chrome)input
Ereignis abgedeckt werden .Hier ist eine effizientere Version, die
on
für alle inhaltsbearbeitbaren Dateien verwendet wird. Es basiert auf den Top-Antworten hier.Das Projekt ist hier: https://github.com/balupton/html5edit
quelle
document.getElementById('editor_input').innerHTML = 'ssss'
. Nachteil ist, dass es IE11 erfordertErwägen Sie die Verwendung von MutationObserver . Diese Beobachter sind entworfen , um Veränderungen in dem DOM und als performant Ersatz zu reagieren Mutationsereignissen .
Vorteile:
Nachteile:
Erfahren Sie mehr:
quelle
input
Ereignis (dascontenteditable
in allen WebKit- und Mozilla-Browsern unterstützt wird, die Mutationsbeobachter unterstützen), da die DOM-Mutation sowohl über Skripte als auch über Benutzereingaben erfolgen kann, aber es ist eine praktikable Lösung für diese Browser. Ich kann mir vorstellen, dass dies die Leistung mehr beeinträchtigen könnte als dasinput
Ereignis, aber ich habe keine eindeutigen Beweise dafür.input
Ereignis in jeder dieser Situationen ausgelöst wird (insbesondere Drag & Drop, Kursivschrift, Kopieren / Ausschneiden / Einfügen über das Kontextmenü). Ich habe auch Fettdruck mit cmd / Strg + B getestet und die erwarteten Ergebnisse erzielt. Ich habe auch überprüft und konnte überprüfen, ob dasinput
Ereignis nicht bei programmatischen Änderungen ausgelöst wird (was offensichtlich erscheint, aber möglicherweise einer verwirrenden Sprache auf der entsprechenden MDN-Seite widerspricht; siehe unten auf der Seite, um zu sehen, was ich meine: Entwickler .mozilla.org / en-US / docs / Web / Events / Eingabe )Ich habe die Antwort von lawwantsin so geändert und das funktioniert für mich. Ich benutze das Keyup-Ereignis anstelle des Tastendrucks, was großartig funktioniert.
quelle
non jQuery schnelle und schmutzige Antwort:
quelle
Zwei Optionen:
1) Für moderne (immergrüne) Browser: Das "Eingabe" -Ereignis würde als alternatives "Änderungs" -Ereignis fungieren.
https://developer.mozilla.org/en-US/docs/Web/Events/input
oder
oder (mit jQuery)
2) Um IE11 und moderne (immergrüne) Browser zu berücksichtigen: Dies überwacht Elementänderungen und deren Inhalt innerhalb der div.
https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
quelle
quelle
Folgendes hat bei mir funktioniert:
quelle
Dieser Thread war sehr hilfreich, als ich das Thema untersuchte.
Ich habe einen Teil des hier verfügbaren Codes in ein jQuery-Plugin geändert, sodass er in einer wiederverwendbaren Form vorliegt, hauptsächlich um meine Anforderungen zu erfüllen. Andere schätzen jedoch möglicherweise eine einfachere Oberfläche für den Start mit inhaltsbearbeitbaren Tags.
https://gist.github.com/3410122
Aktualisieren:
Aufgrund seiner zunehmenden Beliebtheit wurde das Plugin von Makesites.org übernommen
Die Entwicklung wird von hier aus fortgesetzt:
https://github.com/makesites/jquery-contenteditable
quelle
Hier ist die Lösung, die ich letztendlich verwendet habe und die hervorragend funktioniert. Ich verwende stattdessen $ (this) .text (), weil ich nur ein einzeiliges div verwende, das inhaltlich bearbeitet werden kann. Sie können aber auch .html () verwenden, damit Sie sich keine Gedanken über den Umfang einer globalen / nicht globalen Variablen machen müssen und das Vorherige tatsächlich an den Editor div angehängt ist.
quelle
Um Timer und Schaltflächen zum Speichern zu vermeiden, können Sie ein Unschärfeereignis verwenden, das ausgelöst wird, wenn das Element den Fokus verliert. Um jedoch sicherzugehen, dass das Element tatsächlich geändert wurde (nicht nur fokussiert und defokussiert), sollte sein Inhalt mit seiner letzten Version verglichen werden. Oder verwenden Sie das Keydown-Ereignis, um ein "schmutziges" Flag für dieses Element zu setzen.
quelle
Eine einfache Antwort in JQuery: Ich habe diesen Code gerade erstellt und dachte, dass er auch für andere hilfreich sein wird
quelle
$("div [contenteditable=true]")
alle Kinder eines Div direkt oder indirekt ausgewählt werden, die inhaltsbearbeitbar sind.Nicht JQuery Antwort ...
Rufen Sie dazu ein Header-Element mit der ID = "myHeader" auf.
Dieses Element kann jetzt vom Benutzer bearbeitet werden, bis es den Fokus verliert.
quelle
Das Ereignis onchange wird nicht ausgelöst, wenn ein Element mit dem Attribut contentEditable geändert wird. Ein empfohlener Ansatz könnte darin bestehen, eine Schaltfläche hinzuzufügen, um die Edition zu "speichern" .
Überprüfen Sie dieses Plugin, das das Problem auf diese Weise behandelt:
quelle
Die Verwendung von DOMCharacterDataModified unter MutationEvents führt zu demselben Ergebnis . Das Zeitlimit wurde eingerichtet, um das Senden falscher Werte zu verhindern (z. B. hatte ich in Chrome einige Probleme mit der Leertaste).
JSFIDDLE-Beispiel
quelle
DOMCharacterDataModified
wird nicht ausgelöst, wenn der Benutzer vorhandenen Text ändert, z. B. fett oder kursiv.DOMSubtreeModified
ist in diesem Fall angemessener. Außerdem sollten sich Benutzer daran erinnern, dass ältere Browser diese Ereignisse nicht unterstützen.Ich habe dazu ein jQuery-Plugin erstellt.
Sie können einfach anrufen
$('.wysiwyg').wysiwygEvt();
Sie können Ereignisse auch entfernen / hinzufügen, wenn Sie dies wünschen
quelle
innerHTML
ist teuer). Ich würde empfehlen, dasinput
Ereignis dort zu verwenden, wo es existiert, und auf so etwas zurückzugreifen, aber mit einer Art Entprellung.In Angular 2+
quelle
Bitte folgen Sie der folgenden einfachen Lösung
In .ts:
in .html:
quelle
Schauen Sie sich diese Idee an. http://pastie.org/1096892
Ich denke es ist nah. HTML 5 muss das Änderungsereignis wirklich zur Spezifikation hinzufügen. Das einzige Problem ist, dass die Rückruffunktion auswertet, ob (vor == $ (this) .html ()), bevor der Inhalt tatsächlich in $ (this) .html () aktualisiert wird. setTimeout funktioniert nicht und es ist traurig. Lass mich wissen was du denkst.
quelle
Basierend auf der Antwort von @ balupton:
quelle