Open In App

jQuery keyup() Method

Last Updated : 07 Jul, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

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: 



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads