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

Zwei Möglichkeiten:

1) Für moderne (immergrüne) Browser: Das Ereignis "Eingabe" würde als alternatives Ereignis "Änderung" fungieren.

https://developer.mozilla.org/en-US/docs/Web/Events/input

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

o

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

oder (mit jQuery)

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

2) Berücksichtigung von IE11 und modernen (immergrünen) Browsern: Damit werden Änderungen an den Elementen und ihren Inhalten innerhalb des Divs erkannt.

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

Answer 2

const p = document.querySelector('p')
const result = document.querySelector('div')
const observer = new MutationObserver((mutationRecords) => {
  result.textContent = mutationRecords[0].target.data
  // result.textContent = p.textContent
})
observer.observe(p, {
  characterData: true,
  subtree: true,
})

<p contenteditable>abc</p>
<div />

Answer 3

Bei mir hat das folgendermaßen 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);
            }
   });

Answer 4

Dieser Thread war sehr hilfreich, als ich mich mit dem Thema befasst habe.

Ich habe einen Teil des hier verfügbaren Codes in ein jQuery-Plugin umgewandelt, so dass er in einer wiederverwendbaren Form vorliegt, in erster Linie, um meine Bedürfnisse zu befriedigen, aber andere mögen eine einfachere Schnittstelle für den Start mit contenteditable-Tags schätzen.

https://gist.github.com/3410122

Aktualisierung:

Aufgrund seiner zunehmenden Beliebtheit wurde das Plugin auch von Makesites.org

Die Entwicklung wird von hier aus weitergehen:

https://github.com/makesites/jquery-contenteditable

Answer 5

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

Um es zu verwenden, rufen Sie (z.B.) ein Header-Element mit id="myHeader" auf

makeEditable(document.getElementById('myHeader'))

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