ein Ereignis auslösen, wenn contenteditable geändert wird

Können Sie einfach verwenden, focus/blur-Ereignis mit data () - Funktion von jQuery :

//Find all editable content.
$('[contenteditable=true]')
    //When you click on item, record into data("initialText") content of this item.
    .focus(function() {
        $(this).data("initialText", $(this).html());
    });
    //When you leave an item...
    .blur(function() {
        //...if content is different...
        if ($(this).data("initialText") !== $(this).html()) {
            //... do something.
            console.log('New data when content change.');
            console.log($(this).html());
        }
    });
});

UPDATE: Mit Vanilla JS

//Find all editable content.
var contents = document.querySelectorAll("[contenteditable=true]");
[].forEach.call(contents, function (content) {
    //When you click on item, record into `data-initial-text` content of this item.
    content.addEventListener("focus", function () {
        content.setAttribute("data-initial-text", content.innerHTML);
    });
    //When you leave an item...
    content.addEventListener("blur", function () {
        //...if content is different...
        if (content.getAttribute("data-initial-text") !== content.innerHTML) {
            //... do something.
            console.log("New data when content change.");
            console.log(content.innerHTML);
        }
    });
});

InformationsquelleAutor der Antwort Bruno Lesieur

Es ist einfacher, es zu tun mit EventListener (keine jQuery-Methode):

Dokument.getElementById("editor").addEventListener("input", function() { 
alert("Eingabe-Ereignis ausgelöst"); 
}, false); 

InformationsquelleAutor der Antwort VasG

die beste Lösung für dieses Problem ist derzeit die HTML5 input-Veranstaltung

<div contenteditable="true" id="content"></div>

in Ihre jquery.

$('#content').on('input', (e) => {
    //your code here
    alert('changed')
});

InformationsquelleAutor der Antwort Canaan Etai

In chrome und vielleicht auch in anderen Browsern gibt es Fehler, wenn der Benutzer tab drückt wird es schaffen Sie Platz und hängen Sie apple-Spanne oder irgendeine Sache, wie das.. entfernen Sie den Benutzer

var contents = $('.changeable').html();
$('.changeable').blur(function() {
   if (contents!=$(this).html()){
 alert('Handler for .change() called.');
      $(".Apple-tab-span").remove();
       contents = $(this).html();
       contentsTx = $(this).text();
       alert(contentsTx);

   }
});

Dadurch entfernen Sie die span..
es gleiche wie oben-code nur geändert hat sich wenig, oder u hinzufügen können

.Apple-tab-span
{
  Display:None;
}

und das wird auch zu lösen problem ..
http://jsfiddle.net/a4QNB/312/

Gerade geändert @Nikals Antwort ...

InformationsquelleAutor der Antwort nikunjM

Andere Lösung, die leicht modifizierte version des vorherigen, aber es kann sein, mehr komfortabel zu bedienen für einige von Euch.

Idee ist, zu speichern, Herkunft, Wert und vergleichen Sie ihn mit dem aktuellen Wert in der "blur" - Ereignis. Ich Spare Herkunft Wert als Attribut eines editierbaren div-tag (anstatt variable für die Herkunft Wert). Mit dem Attribut container für origin Wert ist bequemer, wenn man eine riesige Anzahl von bearbeitbaren divs in Tabelle (als Zellen). So ist es leicht zu bekommen, Wert Herkunft da brauchen Sie nicht zu viele Variablen.

Sehen meine komplette Beispiel-code:

editierbaren div -

<td><div contenteditable="true" class="cell" origin="originValue">originValue</div></td>

Feststellung der Veränderungen in der Unschärfe

var cells = $("#table").find('td>div[contenteditable=true]');

cells.each(function () {    

        $(this).blur(function() {

                    if ($(this).text() != $(this).attr("origin")) {
                        console.log('changed');
                    }
        });    
});

InformationsquelleAutor der Antwort Bronek