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 vote239 views1 answer
How to create a text that will redirect to anothe page in new tab
Html
11 votes276 views5 answers
Html input maxlength
Html
0 vote252 views1 answer
Scrollable Text in HTML
Html
0 vote265 views1 answer
Ionic 5-star-rating
Html
-1 vote251 views1 answer
How to embed google map in html using iframe
Html
0 vote258 views1 answer
Vue paragraph not showing when class applied to it
Html
1 vote249 views1 answer
How to convert a html canvas into a png file
Html
-1 vote266 views7 answers
Datepicker bootstrap
Html
2 votes252 views1 answer
Css title and label aligned alongside image
Html
5 votes256 views2 answers
How to make radio buttons unselectable
Html