Open In App

jQuery keyup() Method

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: 



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