inhaltsbearbeitbare Änderungsereignisse

Ich möchte eine Funktion ausführen, wenn ein Benutzer den Inhalt eines divwith- contenteditableAttributs bearbeitet . Was entspricht einer onchangeVeranstaltung?

Ich verwende jQuery, daher werden alle Lösungen bevorzugt, die jQuery verwenden. Vielen Dank!

Ich würde Anbringen Hörer vorschlagen zu den wichtigsten Veranstaltungen des editierbaren Element gefeuert, obwohl Sie müssen sich bewusst sein , dass keydownund keypressEreignisse 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 Ereignisse cut copyund behandeln möchten paste. Außerdem kann der Benutzer Text oder anderen Inhalt ablegen, sodass dort ( mouseupzum Beispiel) mehr Ereignisse vorhanden sind . Möglicherweise möchten Sie den Inhalt des Elements als Fallback abfragen.

UPDATE 29. Oktober 2014

Das HTML5- inputEreignis ist langfristig die Antwort. Zum Zeitpunkt des Schreibens wird es für contenteditableElemente in aktuellen Mozilla- (ab Firefox 14) und WebKit / Blink-Browsern unterstützt, jedoch nicht für 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/

Hier ist eine effizientere Version, die onfür alle inhaltsbearbeitbaren Dateien verwendet wird. Es 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

Erwägen Sie die Verwendung von MutationObserver . Diese Beobachter sind entworfen , um Veränderungen in dem DOM und als performant Ersatz zu reagieren Mutationsereignissen .

Vorteile:

• Wird ausgelöst , wenn irgendeine Änderung auftritt, die nur schwer durch das Hören auf wichtige Ereignisse zu erreichen , wie von anderen Antworten vorgeschlagen. All dies funktioniert beispielsweise gut: Drag & Drop, Kursivschrift, Kopieren / Ausschneiden / Einfügen über das Kontextmenü.
• Entwickelt mit Blick auf Leistung.
• Einfacher, unkomplizierter Code. Es ist viel einfacher, Code zu verstehen und zu debuggen, der ein Ereignis abhört, als Code, der 10 Ereignisse abhört.
• Google verfügt über eine hervorragende Bibliothek mit Mutationszusammenfassungen, die 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 sind noch nicht viele Informationen zu Best Practices oder Fallstudien verfügbar

Erfahren Sie mehr:

• Ich habe einen kleinen Ausschnitt geschrieben , um die Verwendung von MutationObserers mit der Behandlung einer Vielzahl von Ereignissen zu vergleichen. Ich habe seit seiner Antwort Baluptons Code verwendet die meisten positiven Stimmen hat.
• Mozilla hat eine ausgezeichnete Seite auf der API
• Schauen Sie sich die MutationSummary- Bibliothek an

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.

$('#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')});

non jQuery schnelle und schmutzige 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);
});

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

document.querySelector('div').addEventListener('input', (e) => {
    // Do something with the "change"-like event
});

oder

<div oninput="someFunc(event)"></div>

oder (mit jQuery)

$('div').on('click', function(e) {
    // Do something with the "change"-like event
});

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

var div = document.querySelector('div');
var divMO = new window.MutationObserver(function(e) {
    // Do something on change
});
divMO.observe(div, { childList: true, subtree: true, characterData: true });

Folgendes hat bei mir funktioniert:

   var clicked = {} 
   $("[contenteditable='true']").each(function(){       
        var id = $(this).attr("id");
        $(this).bind('focus', function() {
            // store the original value of element first time it gets focus
            if(!(id in clicked)){
                clicked[id] = $(this).html()
            }
        });
   });

   // then once the user clicks on save
   $("#save").click(function(){
            for(var id in clicked){
                var original = clicked[id];
                var current = $("#"+id).html();
                // check if value changed
                if(original != current) save(id,current);
            }
   });

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

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.

$('body').delegate('#editor', 'focus', function(){
    $(this).data('before', $(this).html());
});
$('#client_tasks').delegate('.task_text', 'blur', function(){
    if($(this).data('before') != $(this).html()){
        /* do your stuff here - like ajax save */
        alert('I promise, I have changed!');
    }
});

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.

Eine einfache Antwort in JQuery: Ich habe diesen Code gerade erstellt und dachte, dass er auch für andere hilfreich sein wird

    var cont;

    $("div [contenteditable=true]").focus(function() {
        cont=$(this).html();
    });

    $("div [contenteditable=true]").blur(function() {
        if ($(this).html()!=cont) {
           //Here you can write the code to run when the content change
        }           
    });

Nicht JQuery Antwort ...

function makeEditable(elem){
    elem.setAttribute('contenteditable', 'true');
    elem.addEventListener('blur', function (evt) {
        elem.removeAttribute('contenteditable');
        elem.removeEventListener('blur', evt.target);
    });
    elem.focus();
}

Rufen Sie dazu ein Header-Element mit der ID = "myHeader" auf.

makeEditable(document.getElementById('myHeader'))

Dieses Element kann jetzt vom Benutzer bearbeitet werden, bis es den Fokus verliert.

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:

• Erstellen eines schnellen und schmutzigen jQuery contentEditable Plugins

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).

var timeoutID;
$('[contenteditable]').bind('DOMCharacterDataModified', function() {
    clearTimeout(timeoutID);
    $that = $(this);
    timeoutID = setTimeout(function() {
        $that.trigger('change')
    }, 50)
});
$('[contentEditable]').bind('change', function() {
    console.log($(this).text());
})

JSFIDDLE-Beispiel

Ich habe dazu ein jQuery-Plugin erstellt.

(function ($) {
    $.fn.wysiwygEvt = function () {
        return this.each(function () {
            var $this = $(this);
            var htmlold = $this.html();
            $this.bind('blur keyup paste copy cut mouseup', function () {
                var htmlnew = $this.html();
                if (htmlold !== htmlnew) {
                    $this.trigger('change')
                }
            })
        })
    }
})(jQuery);

Sie können einfach anrufen $('.wysiwyg').wysiwygEvt();

Sie können Ereignisse auch entfernen / hinzufügen, wenn Sie dies wünschen

In Angular 2+

<div contentEditable (input)="type($event)">
   Value
</div>

@Component({
  ...
})
export class ContentEditableComponent {

 ...

 type(event) {
   console.log(event.data) // <-- The pressed key
   console.log(event.path[0].innerHTML) // <-- The content of the div 
 }
}

Bitte folgen Sie der folgenden einfachen Lösung

In .ts:

getContent(innerText){
  this.content = innerText;
}

in .html:

<div (blur)="getContent($event.target.innerHTML)" contenteditable [innerHTML]="content"></div>

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.

Basierend auf der Antwort von @ balupton:

$(document).on('focus', '[contenteditable]', e => {
	const self = $(e.target)
	self.data('before', self.html())
})
$(document).on('blur', '[contenteditable]', e => {
	const self = $(e.target)
	if (self.data('before') !== self.html()) {
	  self.trigger('change')
	}
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>