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 vote328 views1 answer
Html template redirect page
Html
1 vote317 views2 answers
Get image from theme folder wordpress
Html
0 vote286 views1 answer
Js download html
Html
0 vote310 views3 answers
How to make a svg of full width of a webpage html
Html
0 vote321 views1 answer
Uncaught TypeError: Cannot read properties of null (reading 'value') at HTMLButtonElement.<anonymous> (index.js:15) (anonymous) @ index.js:15
Html
0 vote298 views1 answer
Display div while load
Html
1 vote320 views2 answers
Head tags
Html
0 vote354 views3 answers
How to prevent cross site scripting to redirect you to another web page
Html
0 vote317 views2 answers
Input limit file type html
Html
0 vote289 views1 answer
Html chat box
Html