How to listen for change events in a contenteditable element with JavaScript?

Sometimes, we want to listen for change events in a contenteditable element with JavaScript.

In this article, we’ll look at how to listen for change events in a contenteditable element with JavaScript.

How to listen for change events in a contenteditable element with JavaScript?

To listen for change events in a contenteditable element with JavaScript, we can listen to the input event.

For instance, we write

<div contenteditable="true" id="editor">Please type something in here</div>

to add a contenteditable div.

Then we write

document.getElementById("editor").addEventListener(
  "input",
  () => {
    console.log("input event fired");
  },
  false
);

to select the element with getElementById.

And then we listen for changes by listening to the input event with addEventListener.

Conclusion

To listen for change events in a contenteditable element with JavaScript, we can listen to the input event.