zufriedene Änderungsereignisse

Hier ist eine effizientere Variante, die verwendet on für alle contenteditables. Es basiert off der top-Antworten hier.

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

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

InformationsquelleAutor der Antwort balupton

nicht jQuery schnell und dirty 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);
});

InformationsquelleAutor der Antwort Developia

Hier ist was für mich gearbeitet:

   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);
            }
   });

InformationsquelleAutor der Antwort gregory whiteside

Hier ist die Lösung, die ich letztendlich benutzt und funktioniert Fabelhaft. Ich verwende $(this).text() statt, da habe ich nur eine Zeile mit div, ist der Inhalt editierbar. Sie können Sie aber auch verwenden .html() auf diese Weise haben Sie keine sorgen über den Rahmen einer globalen oder nicht-globalen Variablen und die Ehe ist tatsächlich angebracht, um den editor div.

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

InformationsquelleAutor der Antwort user740433

Zu vermeiden, Timer und "save" buttons, Sie können benutzen Sie das blur-Ereignis, welches ausgelöst wird, wenn das element den Fokus verliert. aber um sicher zu sein, dass das element wurde tatsächlich geändert (nicht nur fokussiert und defokussiert), dessen Inhalt verglichen werden soll gegenüber seiner letzten version. oder verwenden keydown-Ereignis, um einige "dirty" - flag auf dieses element.

InformationsquelleAutor der Antwort joox

Baute ich ein jQuery-plugin, um dies zu tun.

(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);

Rufen Sie einfach an $('.wysiwyg').wysiwygEvt();

Können Sie auch entfernen /hinzufügen von events wenn Sie es wünschen

InformationsquelleAutor der Antwort Blowsie

Zwei Optionen:

1) Für moderne (evergreen) Browser:
Der "input" - Veranstaltung handeln würde als alternative "change" - Ereignis aus.

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) Konto für IE11 und moderne (evergreen) Browser:
Diese Uhren element-Veränderungen und deren Inhalte in den 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 });

InformationsquelleAutor der Antwort bit-less

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

Verwenden Sie es aufrufen, auf (sagen wir) eine header-element mit id="myHeader"

makeEditable(document.getElementById('myHeader'))

Diesem element wird jetzt bearbeitet werden, indem dem Benutzer, bis es den Fokus verliert.

InformationsquelleAutor der Antwort DrMcCleod