HTML onkeyup Event Attribute Examples
Example 1: This example demonstrates the basic implementation of onkeyup tag.
html
<!DOCTYPE html><html><head> <title>onkeyup Event Attribute </title> <style> h2 { text-align: center; } input[type=text] { width: 50%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; font-size: 24px; color: white; } p { font-size: 20px; } </style></head><body> <p> Release the key to set a green background color. </p> <input type="text" id="demo" onkeydown="this.style.backgroundColor = 'blue';" onkeyup="this.style.backgroundColor = 'green';"></body></html> |
Output
keyup event attribute
Explanation:
- This example includes a styled header, sub-header, and an input field.
- Utilizes onkeydown and onkeyup attributes within the input field.
- Functions dynamically change the input field’s background color based on key events.
Example 2: In this example, we will see the implementation of onkeyup to display the text entered when the key is released.
HTML
<!DOCTYPE html><html> <body> <h1 style=" color: green; font-weight: bold; " > Key Release Example </h1> <label for="textInput"> Type something: </label> <input type="text" id="textInput" onkeyup="contentInfo.innerText = 'You typed: ' + this.value " /> <p id="contentInfo"></p> </body></html> |
Output:
HTML onkeyup Event Attribute
HTML onkeyup Event Attribute
The HTML onkeyup event attribute executes JavaScript code when a user releases a key after pressing it within an input field or textarea, enabling dynamic responses to keyboard input.
It also enables real-time interaction with user input in web forms or applications and is commonly used for live search functionality, password strength checks, or dynamic form validation.
Syntax:
<element onkeyup = "script">
Attribute Value: This attribute contains single value script which works when the keyboard key is released.
HTML onkeyup Supported Tags
It supports all HTML elements Except-