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 onkeyup Event Attribute
The HTML onkeyup event attribute is triggered when a user releases a key on the keyboard. This event occurs after the onkeydown and onkeypress events, making it useful for capturing the final state of user input after a key has been completely processed.
The onkeyup event is commonly used for real-time input validation, live search functionality, character counting, and dynamic content updates as users type.
Syntax
Following is the syntax for the onkeyup event attribute −
<tagname onkeyup="script">Content</tagname>
Where script is the JavaScript code to execute when the key is released. This can be a function call, inline JavaScript code, or a combination of statements.
How It Works
The onkeyup event follows this sequence −
onkeydown − Triggered when the key is first pressed down
onkeypress − Triggered while the key is being pressed (for character keys only)
onkeyup − Triggered when the key is released
The onkeyup event provides access to the event object, which contains information about the key that was released, including event.key, event.keyCode, and modifier keys like Ctrl, Alt, and Shift.
Basic Example
Following example demonstrates the basic usage of the onkeyup event attribute −
<!DOCTYPE html>
<html>
<head>
<title>HTML onkeyup Event Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h2>HTML onkeyup Event Attribute Demo</h2>
<textarea placeholder="Enter your message here" rows="5" cols="40" onkeyup="showInput()"></textarea>
<div id="output" style="margin-top: 20px; font-size: 1.2rem; color: blue;"></div>
<script>
function showInput() {
const textValue = document.querySelector("textarea").value;
document.getElementById("output").innerHTML = "You entered: " + textValue;
}
</script>
</body>
</html>
As you type in the textarea, the onkeyup event displays your input in real-time below the text area −
HTML onkeyup Event Attribute Demo [Text Area - Enter your message here] You entered: [displays typed text]
Character Counter Example
Following example shows how to create a character counter using the onkeyup event −
<!DOCTYPE html>
<html>
<head>
<title>Character Counter with onkeyup</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Character Counter Example</h2>
<label for="message">Enter your message (max 100 characters):</label><br><br>
<textarea id="message" rows="4" cols="50" maxlength="100" onkeyup="countCharacters()"></textarea>
<div id="counter" style="margin-top: 10px; font-weight: bold;">Characters: 0/100</div>
<script>
function countCharacters() {
const textarea = document.getElementById("message");
const counter = document.getElementById("counter");
const length = textarea.value.length;
counter.textContent = `Characters: ${length}/100`;
if (length > 80) {
counter.style.color = "red";
} else if (length > 60) {
counter.style.color = "orange";
} else {
counter.style.color = "green";
}
}
</script>
</body>
</html>
The character counter updates on every key release, changing color as you approach the limit −
Character Counter Example Enter your message (max 100 characters): [Text Area] Characters: 0/100 (green/orange/red based on count)
Input Validation Example
Following example demonstrates real-time input validation using onkeyup −
<!DOCTYPE html>
<html>
<head>
<title>Input Validation with onkeyup</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Email Validation Example</h2>
<label for="email">Enter your email address:</label><br><br>
<input type="text" id="email" placeholder="user@example.com" onkeyup="validateEmail()" style="padding: 8px; width: 250px;">
<div id="validation" style="margin-top: 10px; font-weight: bold;"></div>
<script>
function validateEmail() {
const email = document.getElementById("email").value;
const validation = document.getElementById("validation");
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (email === "") {
validation.textContent = "";
validation.style.color = "black";
} else if (emailPattern.test(email)) {
validation.textContent = "? Valid email address";
validation.style.color = "green";
} else {
validation.textContent = "? Invalid email format";
validation.style.color = "red";
}
}
</script>
</body>
</html>
The validation message updates immediately as you type, providing instant feedback −
Email Validation Example Enter your email address: [Input Field: user@example.com] ? Valid email address (in green)
Key Detection Example
Following example shows how to detect specific keys using the onkeyup event −
<!DOCTYPE html>
<html>
<head>
<title>Key Detection with onkeyup</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Key Detection Example</h2>
<p>Click in the input field and press any key:</p>
<input type="text" id="keyInput" onkeyup="detectKey(event)" placeholder="Press any key..." style="padding: 10px; width: 200px;">
<div id="keyInfo" style="margin-top: 20px; padding: 15px; background-color: #f0f0f0; border-radius: 5px;">
Press a key to see information here...
</div>
<script>
function detectKey(event) {
const keyInfo = document.getElementById("keyInfo");
keyInfo.innerHTML = `
<strong>Key Information:</strong><br>
Key: ${event.key}<br>
Key Code: ${event.keyCode}<br>
Ctrl: ${event.ctrlKey}<br>
Shift: ${event.shiftKey}<br>
Alt: ${event.altKey}
`;
}
</script>
</body>
</html>
This example displays detailed information about each key press, including modifier keys −
Key Detection Example Press any key: [Input Field] Key Information: Key: A Key Code: 65 Ctrl: false Shift: false Alt: false
Common Use Cases
The onkeyup event is particularly useful for the following scenarios −
| Use Case | Description | Why onkeyup is Ideal |
|---|---|---|
| Input Validation | Checking format and validity of user input | Captures the complete value after key is released |
| Character Counting | Displaying remaining characters in text fields | Accurately counts characters including backspace/delete |
| Live Search | Triggering search as user types | Reduces excessive API calls compared to onkeydown |
| Auto-save | Saving content automatically during typing | Ensures the final character is captured before saving |
Browser Compatibility
The onkeyup event attribute is supported by all major browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer. It works consistently across desktop and mobile devices for form elements like <input>, <textarea>, and other focusable elements.
Conclusion
The HTML onkeyup event attribute provides a reliable way to respond to keyboard input after a key is released. It is essential for creating interactive web applications with real-time input validation, character counting, and dynamic content updates. Use onkeyup when you need to capture the complete state of user input after each keystroke.
228 Views
