contenteditable change events

Question

I want to run a function when a user edits the content of a div with contenteditable attribute. What's the equivalent of an onchange event?

I'm using jQuery so any solutions that uses jQuery are preferred. Thanks!

Answer 1

You can try using the code given below:

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

    }

});

For the project, you can refer to this: https://github.com/balupton/html5edit