RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.geeksforgeeks.org/html/html-onkeyup-event-attribute/ below:

HTML onkeyup Event Attribute - GeeksforGeeks

HTML onkeyup Event Attribute

Last Updated : 05 Aug, 2025

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-

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 Use cases 1. How to check whether the enter key is pressed in a textbox or not using JavaScript / jQuery ?

In JavaScript, use the keyup event listener on the textbox, then check if the event's keyCode or `key` property equals 13, indicating the Enter key press.

2. How to use keyup with delay in jQuery ?

In jQuery, use the keyup() function along with setTimeout() to introduce a delay. This delays execution of the specified function until after the key has been released for the defined duration.

Supported Browser

The browser supported by value attribute in option tag are listed below:

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4