Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Execute a script when the element gets user input in HTML?
The oninput event attribute is used to execute a script when an element receives user input. This event fires immediately when the user types, deletes, or modifies content in form elements like text inputs, textareas, and content-editable elements.
Syntax
Following is the syntax for the oninput event attribute −
<element oninput="script">
Where script is the JavaScript code to execute when the input event occurs.
How It Works
The oninput event triggers whenever the value of an input element changes. Unlike onchange, which fires only when the element loses focus, oninput fires in real-time as the user types. This makes it ideal for live validation, search suggestions, and dynamic content updates.
Basic Text Input Example
Following example demonstrates the basic usage of the oninput attribute with a text input −
<!DOCTYPE html>
<html>
<head>
<title>oninput Event Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<p>Write your name below:</p>
<input type="text" id="myid" oninput="display()" placeholder="Type your name...">
<p id="test" style="color: blue; font-weight: bold;"></p>
<script>
function display() {
var p = document.getElementById("myid").value;
document.getElementById("test").innerHTML = "Your answer is " + p;
}
</script>
</body>
</html>
The output shows real-time updates as you type −
Write your name below: [Type your name...] Your answer is (updates as you type)
Character Counter Example
Following example shows how to create a character counter using the oninput event −
<!DOCTYPE html>
<html>
<head>
<title>Character Counter</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Message (Max 100 characters)</h3>
<textarea id="message" rows="4" cols="50" maxlength="100" oninput="countCharacters()" placeholder="Type your message here..."></textarea>
<p>Characters: <span id="count" style="font-weight: bold; color: green;">0</span>/100</p>
<script>
function countCharacters() {
var text = document.getElementById("message").value;
var count = text.length;
var counter = document.getElementById("count");
counter.innerHTML = count;
// Change color based on character count
if (count > 80) {
counter.style.color = "red";
} else if (count > 50) {
counter.style.color = "orange";
} else {
counter.style.color = "green";
}
}
</script>
</body>
</html>
The character counter updates in real-time and changes color based on the count −
Message (Max 100 characters) [Text area for typing] Characters: 0/100 (green ? orange ? red as you type more)
Number Input Validation
Following example demonstrates input validation for numeric values −
<!DOCTYPE html>
<html>
<head>
<title>Number Input Validation</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Enter a number between 1 and 100:</h3>
<input type="number" id="numberInput" min="1" max="100" oninput="validateNumber()" placeholder="Enter number...">
<p id="validation" style="font-weight: bold;"></p>
<script>
function validateNumber() {
var input = document.getElementById("numberInput");
var value = parseInt(input.value);
var message = document.getElementById("validation");
if (input.value === "") {
message.innerHTML = "";
message.style.color = "black";
} else if (isNaN(value)) {
message.innerHTML = "Please enter a valid number";
message.style.color = "red";
} else if (value < 1 || value > 100) {
message.innerHTML = "Number must be between 1 and 100";
message.style.color = "red";
} else {
message.innerHTML = "Valid number: " + value;
message.style.color = "green";
}
}
</script>
</body>
</html>
The validation message updates immediately as the user types −
Enter a number between 1 and 100: [Number input field] Valid number: 25 (green) / Number must be between 1 and 100 (red)
Comparison with Other Input Events
| Event | When It Fires | Use Case |
|---|---|---|
oninput |
Immediately on every input change | Real-time validation, live search, character counting |
onchange |
When element loses focus after value changes | Form submission validation, final value processing |
onkeyup |
When a key is released | Keyboard-specific actions, hotkey detection |
onblur |
When element loses focus | Field completion validation, saving draft data |
Common Use Cases
The oninput event is commonly used for −
Live Search − Filter search results as the user types
Form Validation − Provide immediate feedback on input validity
Character Counters − Show remaining characters in text areas
Password Strength − Display password strength meters
Auto-formatting − Format phone numbers, credit cards as user types
Calculations − Update totals in forms with numeric inputs
Browser Compatibility
The oninput event is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 9+. For older browsers, you may need to use onkeyup and onpaste events as fallbacks.
Conclusion
The oninput event attribute enables real-time script execution whenever a user modifies input element values. It is ideal for creating responsive user interfaces with live validation, search functionality, and dynamic content updates that enhance the user experience.
2K+ Views
