Sometimes, we want to track onchange as we type in input type="text" with JavaScript.
In this article, we’ll look at how to track onchange as we type in input type="text" with JavaScript.
How to track onchange as we type in input type="text" with JavaScript?
To track onchange as we type in input type="text" with JavaScript, we can listen for the input’s input event.
For instance, we write
<input id="source" />
<div id="result"></div>
to add an input and a div.
Then we write
const source = document.getElementById("source");
const result = document.getElementById("result");
const inputHandler = (e) => {
result.innerHTML = e.target.value;
};
source.addEventListener("input", inputHandler);
to select tjhe input and div with getElementById.
Then we call addEventListener to listen to the input event on the source input.
inputHandler is called as we type in the input.
In it, we set the content of the div to the input value with
result.innerHTML = e.target.value
e.target.value has the input’s value.
Conclusion
To track onchange as we type in input type="text" with JavaScript, we can listen for the input’s input event.
