The HTML oninput attribute is an event handler that triggers a script to execute when an element receives user input.
Definition and Usage
➔ This attribute is mainly used with the <input> and <textarea> elements.
➔ The oninput event is fired whenever the value of an <input> or <textarea> element changes.
➔ oninput is different from onchange. onchange typically fires when the element loses focus after its value change, whereas oninput fires with each individual change.
➔ Typically used where immediate updates of user input are required, such as live search, filtering, character counters, or real-time validation.
Syntax
//In HTML
<input type="text" oninput="myFunction()">
// In Javascript object
object.oninput =function() {myHandler()};
// In Javascript object
object.oninput = (event) => { };
// Using EventListener
object.addEventListener("input", (event) => { });
Applies to
This attribute can be used on the following element.
| Attribute | Element |
|---|---|
| oninput | All visible elements |
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML oninput Attribute Example</title>
<meta charset="utf-8" />
<style>
input[type="text"] {
width: 230px;
height: 30px;
background-color: #efffff;
font-size: 14pt;
color: #000;
border-radius: 5px;
margin: 5px;
}
input[type="text"]:hover,
input[type="email"]:hover {
background-color: #fff;
}
</style>
</head>
<body>
<h2>HTML oninput Attribute Example</h2>
<p>Type something to fire the oninput event and count the total characters.</p>
<p id="mypara"></p>
Input: <input type="text" name="name" id="name" oninput="myFunction(this)"><br>
<script>
function myFunction(p) {
document.querySelector("#mypara").innerHTML = "Input is: " + p.value.toString() + "<br>Total characters: " + p.value.length;
}
</script>
</body>
</html>
Click on the "Try it Now" button to see how it works.