jQuery keyup is one of the keyboard event methods. Other jQuery keyboard event methods are keydown() and keypress().
jQuery keyup
jQuery keyup method triggers when you release the pressed key. You can attach functions to execute when this event occurs.
jQuery keyup method syntax
- keyup(): This jQuery keyup method is used without any arguments.
- keyup(handler): This jQuery keyup method attaches a function to be executed when the keyup event is fired.
jQuery keyup example
Following example demonstrates the use of jQuery keyup method.
jquery-keyup.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html> <head> <title>jQuery keyup event example</title> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script> $(document).ready(function(){ $("input:text").keyup(function(){ $("input:text").css("background-color","red"); }); //reset jQuery keyup css $("input:reset").click(function(){ $("input:text").css("background-color","white"); }); }); </script> </head> <body> <h3>jQuery keyup example</h3> Enter anything: <input type="text"> <input type="reset"> <br><br> Type something above, after key up background color will change to Red. <br><br> Click on Reset button to try again. </body> </html> |
In above example, when the key is up, keyup() method is triggered which in turn executes the function that changes the background colour to red.
Below screencast shows above jQuery keyup example in action.
