Describe keyup event and keydown event in jQuery.

The keyup event is triggered after a key is released in the keyboard. The jQuery keyup method will be used to perform any action or run a function as the keyup event occurs in your web document.
Note that, the jQuery keyup event returns the same values for lowercase and uppercase letters on keyup, whereas the keypress returns different for ‘a’ and ‘A’, for example.

Syntax of jQuery keyup method

$(selector).keyup(function)
The function is optional in the keyup method.
An example of keyup event
The example below shows as a key is released and the keyup event occurs the jQuery $.keyup() method will capture the event and throw an alert with ASCII value of the pressed key.

<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script> 
$(document).ready(function(){
   $("#keyboard").keyup(function(){ 
    alert("keyup event occured! The Ascii value of pressed key is: " + event.keyCode); 
  }); 
}); 
</script> 
</head> 
<body> 
Enter keyboard keys: <input type="text" id="keyboard"> 
</body> 
</html>

The keydown event

The keydown event is triggered when a key is pressed down in the keyboard. The jQuery keydown method will be used to perform some action or run an optional function as the keypress event occurs in the web page.The key down event is quite similar to keypress event, however, there are differences between the two – for example pressing a few keys will trigger only the keydown event like ALT, CTRL, ESC etc. However, the keypress event will not be triggered for those keys.Also keypress event returns different values for lowercase and uppercase letters, whereas keyup and keydown return the same.
Syntax of jQuery keydown method
$(selector).keydown(function)
Where the function is optional to execute.
Example of keydown jQuery
In the following example, as a key is pressed down and the keydown event occurs, the jQuery keydown method will capture the event and throw an alert with ASCII value of the pressed key.

<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
  $("#keyboard").keydown(function(){ 
    alert("keydown event occured! The Ascii value of pressed key is: " + event.keyCode); 
  }); 
}); 
</script> 
</head> 
<body> 
Enter keyboard keys: <input type="text" id="keyboard"> 
</body> 
</html>

Need Help? Contact Us.

Log in

*
*

Forgot password?

*

New User

*
*
*
*