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

3 votes139 views1 answer
Gradient on top of image css
Html
4 votes136 views2 answers
Image drive inside html
Html
10 votes169 views6 answers
Bootstrap tabs
Html
0 vote138 views1 answer
Https://stackoverflow.com/questions/47961310/how-to-stack-multiple-images-in-bootstrap-4-carousel?rq=1
Html
2 votes126 views1 answer
Html video disable right click
Html
1 vote142 views2 answers
How to open html file in terminal
Html
0 vote152 views1 answer
@click event disabled source
Html
0 vote147 views1 answer
React router preventing assets from being served
Html
0 vote138 views1 answer
Telegram href link code
Html
0 vote143 views1 answer
Simple program of html
Html