Open In App

jQuery keyup() Method

Last Updated : 07 Jul, 2023
Summarize
Comments
Improve
Suggest changes
Like Article
Like
Share
Report
News Follow

The jQuery keyup() is an inbuilt method that is used to trigger the keyup event whenever the User releases a key from the keyboard. So, Using keyup() method we can detect if any key is released from the keyboard. 

Syntax:

$(selector).keyup(function) 

Here selector is the selected element. 

Parameters: It accepts an optional parameter as a function which gives the idea whether any key is pressed or not. 

jQuery examples to show the working of keyup() Method:
Example 1: Below code is used to check if a keyboard key is released after being pressed. 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Jquery | Keyup() </title>
    <script src=
    </script>
 
    <script>
        $(document).keyup(function (event) {
 
            alert('You released a key');
        });
    </script>
</head>
 
<body>
    <center>
        <h1>
            Press and release a key from the keyboard
        </h1>
    </center>
</body>
 
</html>


Output: 

Example 2: Below code is used to change background color of the page whenever a key is released from the keyboard 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Jquery | Keyup() </title>
    <script src=
    </script>
 
    <script>
        let colors = ['red', 'blue', 'green', 'grey',
            'black', 'white', 'teal', 'yellow'];
        let i = 0;
        $(document).keyup(function (event) {
 
            $('body').css('background-color', colors[i]);
            i++;
            i = i % 9;
 
        });
    </script>
</head>
 
<body>
    <center>
        <h3>
            Press any key from the keyboard and then release it <br>
            to change the background color of the page
        </h3>
    </center>
</body>
 
</html>


Output: 



Next Article

Similar Reads

three90RightbarBannerImg