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 vote216 views1 answer
Html cursief
Html
13 votes175 views2 answers
Multiple collapse bootstrap 4
Html
0 vote187 views1 answer
Set default selected option in select form laravel
Html
0 vote229 views1 answer
Json placeholder limit
Html
93 votes195 views6 answers
How to add favicon in html
Html
12 votes223 views2 answers
Simple html website coding
Html
14 votes216 views6 answers
Html select placeholder
Html
0 vote194 views1 answer
How do you set a focus keyphrase in html site
Html
8 votes128 views2 answers
Input type year
Html
-1 vote169 views1 answer
Jqury
Html