oninput
The oninput event is fired when the value of an <input>, <textarea>, or <select> element is modified.
oninput event
The oninput event is activated whenever the value of an input field is altered. It is commonly used for real-time form validation or dynamic updates as users enter data.
Syntax
In HTML
index.html
<element oninput="myScript">
In JS
script.js
object.oninput = function(){myScript};
In JavaScript, the addEventListener() function is used.
script.js
object.addEventListener("input", myScript);
Example
::event-oninput
::
index.html
<!DOCTYPE html>
<html>
<body>
<h1>HTML DOM Events</h1>
<h2>The oninput Event</h2>
<p>Write something in the text field to trigger a function.</p>
<input type="text" id="myInput" oninput="myFunction()">
<p id="demo"></p>
<script>
function myFunction() {
let text = document.getElementById("myInput").value;
document.getElementById("demo").innerHTML = "You wrote: " + text;
}
</script>
</body>
</html>
Values
The
oninput event is comparable to the onchange event.Conclusion
The oninput event is essential for handling real-time updates in web applications. It allows developers to respond instantly as users modify input values, making it ideal for tasks like form validation and dynamic content updates.