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

2 votes110 views1 answer
Etag header
Html
1 vote96 views1 answer
Jinja avoid auto escape
Html
0 vote119 views1 answer
Display pdf in html fastapi
Html
-1 vote111 views1 answer
File_put_contents(/var/www/demo.onlineexammanagement.com/public_html/storage/framework/cache/data/ea/83/ea83c7b371f7573de3cd055cea9229af0b0541e5): failed to open stream: No such file or directory
Html
0 vote103 views1 answer
Html sup tag
Html
1 vote110 views1 answer
Jquery insert html into iframe
Html
0 vote59 views1 answer
Html command
Html
0 vote101 views3 answers
Time sequelize html example stack overflow
Html
0 vote94 views1 answer
Kebab-case
Html
10 votes95 views4 answers
Html lang attribute
Html