Open In App
Related Articles

HTML onkeyup Event Attribute

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

The onkeyup event attribute works when the user releases the key from the keyboard. It simply activates when a key is released after being pressed.

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

Supported Tags:  

It supports all HTML elements Except- 

Attribute Value:

This attribute contains single value script which works when the keyboard key is released. 

Example 1: 

In this example, we will see the implementation of onkeyup tag.

html

<!DOCTYPE html>
<html>
    <head>
        <title>onkeyup Event Attribute </title>
        <style>
            h1 {
                text-align: center;
                color: green;
            }
            h2 {
                text-align: center;
            }
            input[type=text] {
                width: 100%;
                padding: 12px 20px;
                margin: 8px 0;
                box-sizing: border-box;
                font-size: 24px;
                color: white;
            }
            p {
                font-size: 20px;
            }
        </style>
    </head>
    <body>
        <h1>
            GeeksforGeeks
            <h1>
        <h2>
            onkeyup Event Attribute
        </h2>       
        <p>
            Release the key to set a green background color.
        </p>
        <input type="text" id="demo"
        onkeydown="keydownFunction()"
        onkeyup="keyupFunction()">
        <script>
            function keydownFunction() {
                document.getElementById("demo")
                .style.backgroundColor = "blue";
            }
 
            function keyupFunction() {
                document.getElementById("demo")
                .style.backgroundColor = "green";
            }
        </script>
    </body>
</html>                   

                    

Output: 

nmh

Output

Example 2:

 In this example, we will see the implementation of onkeyup tag with another example.

HTML

<!DOCTYPE html>
<html>
 
<body>
    <center>
        <h1 style="color:green;font-weight:bold;">
            Key Release Example
        </h1>
        <label for="textInput">
          Type something:
          </label>
        <input type="text" id="textInput"
               onkeyup="updateContent()">
        <p id="contentInfo"></p>
 
        <script>
            function updateContent() {
                var userInput = document.
                getElementById("textInput").value;
                document.getElementById("contentInfo").
                innerText = "You typed: " + userInput;
            }
        </script>
    </center>
</body>
 
</html>

                    

Output:

kil

Output

Supported Browser:

  • Google Chrome 1 and above
  • Edge 12 and above
  • Firefox 6 and above
  • Opera 12.1 and above
  • Safari 1.2 and above


Last Updated : 21 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads