Sometimes, we want to listen for changes in contenteditable elements with JavaScript.
In this article, we’ll look at how to listen for changes in contenteditable elements with JavaScript.
How to listen for changes in contenteditable elements with JavaScript?
To listen for changes in contenteditable elements with JavaScript, we listen for 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");
});
to select the div with getElementById.
And then we call addEventListener to listen to the input event on it.
When we change the div’s contents, then event handler is called.
Conclusion
To listen for changes in contenteditable elements with JavaScript, we listen for the input event.
