déclencher un événement lorsque contenteditable est modifié

Question

Lorsque la valeur d'un divs est modifiée, comment puis-je déclencher un événement ?

<div class="changeable" contenteditable="true"> Click this div to edit it <div>

Ainsi, lorsque son contenu change, je veux créer une alerte et/ou faire d'autres choses :

$('.changeable').text().change(function() {
  alert('Handler for .change() called.');
});

Answer 1

Il suffit de stocker le contenu dans une variable et de vérifier s'il est différent après blur() événement. S'il est différent, enregistrez le nouveau contenu.

var contents = $('.changeable').html();
$('.changeable').blur(function() {
    if (contents!=$(this).html()){
        alert('Handler for .change() called.');
        contents = $(this).html();
    }
});

exemple : http://jsfiddle.net/niklasvh/a4QNB/

Answer 2

Vous pouvez simplement utiliser l'événement focus/blur avec la fonction data() de 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 : Avec 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);
        }
    });
});

Answer 3

La meilleure solution à ce problème est actuellement le Événement de saisie HTML5

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

dans votre jquery.

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

Answer 4

J'ai construit un plugin jQuery pour faire cela.

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

Vous pouvez simplement appeler $('.wysiwyg').wysiwygEvt();

Vous pouvez également supprimer ou ajouter des événements si vous le souhaitez.

Answer 5

Il est plus simple de le faire en utilisant EventListener (pas une méthode jQuery) :

document.getElementById("editor").addEventListener("input", function() {
   alert("input event fired");
}, false);