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
HTML oninput Event Attribute
The oninput event attribute in HTML is triggered when the user enters or modifies input in form elements such as <input>, <textarea>, and <select> elements. Unlike onchange, which fires only when the element loses focus, oninput fires immediately as the user types or modifies content.
Syntax
Following is the syntax for the oninput event attribute −
<tagname oninput="script"></tagname>
Where script is the JavaScript code or function to execute when the input event occurs.
Using oninput with Textarea
The oninput event is commonly used with <textarea> elements to provide real-time feedback as users type.
Example
Following example demonstrates how the oninput event changes the background color of a textarea as the user types −
<!DOCTYPE html>
<html>
<head>
<title>HTML oninput Event Attribute Demo</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
text-align: center;
}
textarea {
border: 2px solid #333;
font-size: 16px;
padding: 10px;
border-radius: 5px;
transition: background-color 0.3s ease;
}
</style>
</head>
<body>
<h1>HTML oninput Event Attribute Demo</h1>
<textarea placeholder="Enter your message here" oninput="inputFn()" rows="6" cols="50"></textarea>
<p id="status">Start typing to see the effect...</p>
<script>
function inputFn() {
document.querySelector('textarea').style.backgroundColor = '#e6f3ff';
document.getElementById('status').textContent = 'Input detected! Background changed.';
}
</script>
</body>
</html>
When the user types in the textarea, the background color changes to light blue and a status message appears −
HTML oninput Event Attribute Demo [Textarea with light blue background when typing] Input detected! Background changed.
Using oninput with Input Elements
The oninput event works with various input types including text, number, email, and search fields.
Example − Character Counter
Following example shows a real-time character counter using the oninput event −
<!DOCTYPE html>
<html>
<head>
<title>Character Counter with oninput</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.input-container { margin: 20px 0; }
input[type="text"] {
width: 300px;
padding: 8px;
font-size: 16px;
border: 2px solid #ddd;
border-radius: 4px;
}
.counter {
font-weight: bold;
color: #007bff;
margin-top: 5px;
}
</style>
</head>
<body>
<h2>Real-time Character Counter</h2>
<div class="input-container">
<label for="username">Username (max 20 characters):</label>
<input type="text" id="username" maxlength="20" oninput="updateCounter()">
<div class="counter" id="counter">0 / 20 characters</div>
</div>
<script>
function updateCounter() {
const input = document.getElementById('username');
const counter = document.getElementById('counter');
const length = input.value.length;
counter.textContent = length + ' / 20 characters';
if (length >= 18) {
counter.style.color = 'red';
} else if (length >= 15) {
counter.style.color = 'orange';
} else {
counter.style.color = '#007bff';
}
}
</script>
</body>
</html>
As the user types, the character count updates in real-time and the color changes based on the remaining characters −
Real-time Character Counter Username (max 20 characters): [text input field] 5 / 20 characters (updates as you type)
Example − Live Search Simulation
Following example demonstrates how oninput can be used to simulate a live search feature −
<!DOCTYPE html>
<html>
<head>
<title>Live Search with oninput</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.search-container { margin-bottom: 20px; }
#searchInput {
width: 300px;
padding: 10px;
font-size: 16px;
border: 2px solid #007bff;
border-radius: 5px;
}
.results {
border: 1px solid #ddd;
border-radius: 5px;
max-height: 200px;
overflow-y: auto;
}
.result-item {
padding: 10px;
border-bottom: 1px solid #eee;
background-color: #f9f9f9;
}
</style>
</head>
<body>
<h2>Live Search Demo</h2>
<div class="search-container">
<input type="text" id="searchInput" placeholder="Search fruits..." oninput="performSearch()">
</div>
<div class="results" id="results"></div>
<script>
const fruits = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry', 'Fig', 'Grape', 'Honeydew'];
function performSearch() {
const query = document.getElementById('searchInput').value.toLowerCase();
const results = document.getElementById('results');
if (query.length === 0) {
results.innerHTML = '';
return;
}
const matches = fruits.filter(fruit =>
fruit.toLowerCase().includes(query)
);
if (matches.length > 0) {
results.innerHTML = matches.map(match =>
'<div class="result-item">' + match + '</div>'
).join('');
} else {
results.innerHTML = '<div class="result-item">No results found</div>';
}
}
</script>
</body>
</html>
As the user types in the search box, matching results are displayed instantly without requiring a button click or form submission −
Live Search Demo Search fruits... [search input field] [Results appear below as you type]
Browser Support and Considerations
The oninput event is well-supported across modern browsers. However, for intensive operations like search queries or API calls, consider adding a small delay (debouncing) to avoid excessive function calls on every keystroke.
Example − Debounced Input
<!DOCTYPE html>
<html>
<head>
<title>Debounced oninput Event</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Debounced Input (500ms delay)</h2>
<input type="text" placeholder="Type something..." oninput="debouncedSearch()">
<p id="output">Waiting for input...</p>
<script>
let timeout;
function debouncedSearch() {
clearTimeout(timeout);
timeout = setTimeout(function() {
const input = document.querySelector('input');
const output = document.getElementById('output');
output.textContent = 'Processing: "' + input.value + '"';
}, 500);
}
</script>
</body>
</html>
This approach waits 500ms after the user stops typing before processing the input, reducing unnecessary function calls.
Conclusion
The oninput event attribute provides real-time input monitoring for HTML form elements, making it ideal for creating responsive user interfaces with features like live search, character counters, and instant validation. Unlike onchange, it fires immediately as users type, enabling dynamic and interactive web experiences.
426 Views
