The HTML onkeyup attribute is an event handler that triggers a script to execute when the user releases a key on the keyboard.
Definition and Usage
➔ When the user lifts their finger from the key, the onkeyup event is fired.
➔ onkeyup, onkeypress and onkeydown are all HTML keyboard event attributes.
➔ The sequence of related keyboard events is usually onkeydown, then onkeypress, and then onkeyup.
➔ When the onkeypress event is triggered, an event object can provide information about the key pressed (e.g., event.key, event.code, event.keyCode).
Keyboard key event sequence:
- 1 onkeydown - is triggered when the user presses a key on the keyboard.
- 2 onkeypress - is triggered when the user presses a key on the keyboard (when it produces a character key).
- 3 onkeyup - is triggered when the user releases a key on the keyboard.
Syntax
//In HTML
<input type="text" onkeyup="myFunction()">
// In Javascript object
object.onkeyup =function() {myHandler()};
// In Javascript object
object.onkeyup = (event) => { };
// Using EventListener
object.addEventListener("keyup", (event) => { });
Applies to
This attribute can be used on the following element.
| Attribute | Element |
|---|---|
| onkeyup | All visible elements |
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML onkeyup Attribute Example</title>
<meta charset="utf-8" />
<style>
input[type="text"] {
width: 230px;
height: 30px;
background-color: #efffff;
font-size: 14pt;
color: #000;
border-radius: 5px;
margin: 5px;
}
input[type="text"]:hover {
background-color: #fff;
}
</style>
</head>
<body>
<h2>HTML onkeyup Attribute Example</h2>
<p>Type Characters in the textfield to fire keyup event.</p>
Name: <input type="text" name="name" id="name" onkeyup="myFunction(event)"><br>
<script>
function myFunction(e) {
alert(e.key.toUpperCase());
}
</script>
</body>
</html>
Click on the "Try it Now" button to see how it works.