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

0 vote166 views1 answer
How to switch between read only input in html
Html
0 vote177 views1 answer
Word count alpine js
Html
1 vote128 views1 answer
Info icon html
Html
1 vote176 views1 answer
Coc allow comments in json
Html
1 vote168 views1 answer
Did not expect server html to contain a div in div
Html
0 vote174 views1 answer
How to stop html audio
Html
0 vote171 views1 answer
HTML5 Video tag not working Safari iPhone iPad video webpage supported
Html
6 votes160 views3 answers
Jquery unescape html
Html
1 vote184 views1 answer
Usehistory is not exported from react-router-dom
Html
4 votes164 views5 answers
Html tag
Html