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 vote127 views1 answer
How to show data in html table from database in multiple table in laravel
Html
15 votes131 views3 answers
How to make an image link on html
Html
0 vote124 views1 answer
Twig markdown html
Html
6 votes131 views2 answers
Embed png in html
Html
13 votes78 views1 answer
Git clone subdirectory only
Html
43 votes137 views6 answers
Html line break
Html
3 votes128 views2 answers
Html meta tags for seo
Html
8 votes129 views1 answer
TypeError: Illegal invocation
Html
13 votes120 views1 answer
How do i make a boxin html
Html
2 votes144 views1 answer
Make element disappear on smaller screens in bootstrap
Html