Contenteditable onchange

<!-- Use an "input" event listener -->
<div contenteditable="true" id="editor">Please type something in here</div>
<script>
  document.getElementById("editor").addEventListener("input", inputEvt => {
    console.log("input event fired");
  }, false);
</script>

Contenteditable onchange

<!-- Using JQuery -->
<!-- Add a data attribute to DIV -->
<div contenteditable="true" id="editor" data-html="">Please type comething in here</div>
<script>
  // DIV onclick store the current div content data attribute
  $('#editor').on('click', () => {
    let item = $(this)
    item.data({html: item.html()})
  })
  // DIV onblur store the current div content data attribute
  $('#editor').on('blur', () => {
    let item = $(this)
    if (item.data('html') !== item.html()) {
        // DIV content was changed
    	// do something here
    }
  })
</script>

Similar codes

1 vote307 views1 answer
Html color black
Html
0 vote313 views4 answers
<script> var x = 4; var y = 5; var z = x + y; z = x*y; document.getElementById('demo').innerHtml= z; system.print(z); </script>
Html
0 vote295 views1 answer
How to default select a span tags functions
Html
76 votes322 views5 answers
Bootstrap 4 bg
Html
18 votes313 views4 answers
Html boilerplate w3schools
Html
3 votes306 views3 answers
How to ignore prettier
Html
-2 votes304 views1 answer
All codes of html
Html
0 vote334 views1 answer
Java ee static html
Html
1 vote337 views1 answer
Vue submit reloads page
Html
0 vote287 views1 answer
Cshtml set a max value foreach
Html