Skip to content
Related Articles
Open in App
Not now

Related Articles

jQuery keyup() Method

Improve Article
Save Article
  • Last Updated : 18 Nov, 2022
Improve Article
Save Article

The jQuery keyup() is an inbuilt method which is used to trigger the keyup event whenever 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>
    <br>
    <br>
    <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>
        var colors = ['red', 'blue', 'green', 'grey',
            'black', 'white', 'teal', 'yellow'];
        var i = 0;
        $(document).keyup(function (event) {
  
            $('body').css('background-color', colors[i]);
            i++;
            i = i % 9;
  
        });
    </script>
</head>
  
<body>
    <br><br>
    <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: 

 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!