Open In App

HTML onkeyup Event Attribute

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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

HTML-keydown-attribute

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:

kil

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:



Last Updated : 08 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads