HTML onkeyup Event Attribute
Description
The onkeyup
HTML event attribute is fired when the user releases a key on the keyboard. It can be used on any HTML element except <base>
, <bdo>
, <br>
, <head>
, <html>
, <iframe>
, <meta>
, <param>
, <script>
, <style>
, and <title>
.
The onkeyup
attribute takes a JavaScript expression as its value, which is executed when the event is fired. The expression can be used to perform any kind of operation, such as updating the text of an element, submitting a form, or playing a sound.
Here is an example of how to use the onkeyup
attribute:
<input type="text" onkeyup="myFunction()">
In this example, the myFunction()
function will be executed when the user releases a key in the <input>
element.
The onkeyup
event can be used for a variety of purposes, such as:
- Validating user input
- Autocompleting text fields
- Implementing keyboard shortcuts
- Playing games
- Creating interactive animations
Here is an example of how to use the onkeyup
event to validate user input:
<input type="text" onkeyup="validateInput()">
function validateInput() {
var input = document.querySelector('input');
var value = input.value;
if (value.length < 5) {
input.style.borderColor = 'red';
} else {
input.style.borderColor = 'green';
}
}
In this example, the validateInput()
function is executed whenever the user releases a key in the <input>
element. The function checks if the input value is at least 5 characters long. If it is not, the function sets the border color of the <input>
element to red. Otherwise, the function sets the border color to green.
Syntax
<element onkeyup="script">
Values
- scriptThe name of the script to use when the event has been triggered.
Example
<!DOCTYPE html>
<html>
<head>
<title>Event Attribute onkeyup</title>
</head>
<body>
<p>To demonstrate the onkeyup event attribute, enter your name. This script converts all letters to uppercase (often used in this way when specifying bank data).</p>
<p>Enter your name:</p>
<input type="text" id="name" onkeyup="keyboardTest()">
<script>
function keyboardTest() {
var x = document.getElementById("name")
x.value = x.value.toUpperCase();
}
</script>
</body>
</html>
Browser Support
The following table will show you the current browser support for the HTML onkeyup
Event Attribute.
Desktop | |||||
Yes | Yes | Yes | Yes | Yes |
Tablets / Mobile | |||||
Yes | Yes | Yes | Yes | Yes | Yes |
Last updated by CSSPortal on: 8th October 2023