xxxxxxxxxx
<!-- 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>
xxxxxxxxxx
<div id="editor" contenteditable>
Text inside div
</div>
<script type="text/javascript">
document.getElementById("editor").addEventListener("input",
(e) => console.log(e.currentTarget.textContent), false);
</script>
xxxxxxxxxx
<!-- 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>