jQuery | keyup() with Examples

The keyup() is an inbuilt method in jQuery 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.

Return values: It returns whether any key is pressed or not and accordingly change the background color.

jQuery code to show the working of keyup() Method:

Code #1:
Below code is used to check if a keyboard key is released after being pressed.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:
After running the code:
keydown output initial

After pressing any key from the keyboard-
Output keyup

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
  
<head>
    <title>Jquery | Keyup() </title>
    <script
    </script>
</head>
<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>
  
<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>                                       

chevron_right


Output:
Before pressing a key:
Keyup method Output
Every time When any key is pressed and released from the keyboard, The background colour of the page changes to a new colour-

After pressing and releasing any key:
Output-1

Output-2



My Personal Notes arrow_drop_up

self motivated and passionate programmer

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.