Skip to content
Related Articles

Related Articles

jQuery | keyup() with Examples
  • Last Updated : 13 Feb, 2019

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.




<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>

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




<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>                                       

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

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :