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
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
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-