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
Selected Reading
What is the usage of oninput event in JavaScript?
The oninput event occurs whenever the value of an input element changes. Unlike onchange, which fires only when the element loses focus, oninput triggers immediately as the user types, making it ideal for real-time validation and live search functionality.
Syntax
// HTML attribute
<input oninput="functionName()">
// JavaScript property
element.oninput = function() { /* code */ };
// Event listener
element.addEventListener('input', function() { /* code */ });
Basic Example
<!DOCTYPE html>
<html>
<head>
<title>oninput Example</title>
</head>
<body>
<p>Type something below:</p>
<input type="text" id="textInput" placeholder="Start typing...">
<p id="output">You typed: </p>
<script>
document.getElementById('textInput').oninput = function() {
var inputValue = this.value;
document.getElementById('output').textContent = 'You typed: ' + inputValue;
};
</script>
</body>
</html>
Real-time Character Counter
<!DOCTYPE html>
<html>
<head>
<title>Character Counter</title>
</head>
<body>
<textarea id="messageInput" placeholder="Enter your message..." maxlength="100"></textarea>
<p id="counter">Characters: 0/100</p>
<script>
document.getElementById('messageInput').addEventListener('input', function() {
var length = this.value.length;
var maxLength = this.maxLength;
document.getElementById('counter').textContent = 'Characters: ' + length + '/' + maxLength;
});
</script>
</body>
</html>
oninput vs onchange Comparison
| Event | Trigger | Use Case |
|---|---|---|
oninput |
Every character change | Real-time feedback, live search |
onchange |
When element loses focus | Form validation, final value processing |
Live Search Example
<!DOCTYPE html>
<html>
<head>
<title>Live Search</title>
</head>
<body>
<input type="text" id="searchBox" placeholder="Search fruits...">
<ul id="results"></ul>
<script>
var fruits = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry', 'Fig', 'Grape'];
document.getElementById('searchBox').oninput = function() {
var query = this.value.toLowerCase();
var results = document.getElementById('results');
results.innerHTML = '';
if (query.length > 0) {
var matches = fruits.filter(function(fruit) {
return fruit.toLowerCase().includes(query);
});
matches.forEach(function(fruit) {
var li = document.createElement('li');
li.textContent = fruit;
results.appendChild(li);
});
}
};
</script>
</body>
</html>
Key Points
- Works with all input elements: text, email, password, textarea, etc.
- Fires immediately on every character change
- Perfect for real-time validation and live search
- Modern alternative to deprecated
onkeyupfor input monitoring - Supported in all modern browsers
Conclusion
The oninput event provides real-time input monitoring, making it essential for interactive web applications. Use it for live validation, character counting, and search-as-you-type functionality.
Updated on: 2026-03-15T23:18:59+05:30
433 Views
Advertisements