In addition to mouse events, jQuery also responds to key board events when user presses any key on the keyboard, presses key down, releases key up, input element receives focus, or input element looses focus. These events are triggered when user interacts with the keyboard. In general, these key events are bound to the HTML elements, however, the key events can be bound to any element. The event is triggered only when the element gets the focus.

The following HTML code demonstrates the key events supported by the jQuery.

also read:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$(document).keypress(function(eventObject){
	    console.log('key pressed & key code is: ' + eventObject.which);
	});

	$(document).keyup(function(eventObject){
	    console.log('key up & key code is: ' + eventObject.which);
	});

	$(document).keydown(function(eventObject){
	    console.log('key down & key code is: ' + eventObject.which);
	});

	$("#focusInput").focusin(function(){
	    console.log('focusInput got the focus');
	});

	$("#focusInput").focusout(function(){
	    console.log('focusInput lost focus');
	});

});
</script>
</head>
<body>
  <input type="text" id="focusInput"/>
</body>
</html>

Notice how the key code is displayed whenever we press any key on the keyboard. We are accessing property of eventObject, ‘which’ to get the key code of the key pressed. Similarly, we have an input textbox which is configured with focusin and focusout events. The focusin is triggered when we put cursor into that textbox. The focusout is triggered when we take away focus of the textbox by clicking some other widget or outside the textbox.

The following is the quick summary of the jQuery key events.

jQuery Key Events – Quick Summary

keyPress

The ‘keyPress’ event is triggered when any key is pressed on the keyboard. We can get the key code of the key pressed from the ‘which’ property of the event object as shown below:

$(document).keypress(function(eventObject){
    console.log('key pressed & key code is: ' + eventObject.which);
});

keyUp

The ‘keyUp’ event is triggered when user presses any key and releases the key on the keyboard. The ‘which’ property of the event object gives us the key code of the released key.

$(document).keyup(function(eventObject){
    console.log('key up & key code is: ' + eventObject.which);
});

keyDown

The ‘keyDown’ event is triggered when user presses any key on the keyboard. The ‘which’ property of the event object gives us the key code of the key pressed.

$(document).keydown(function(eventObject){
    console.log('key down & key code is: ' + eventObject.which);
});

focusIn

The ‘focusIn’ event is triggered when any element gets focus.

$("#focusInput").focusin(function(){
    console.log('focusInput got the focus');
});

focusOut

The ‘focusOut’ event is triggered when any element loses its focus.

$("#focusInput").focusout(function(){
    console.log('focusInput lost focus');
});

jQuery key events are great way to have control over which key user presses or releases, which HTML widget gets focus or loses focus.The ‘focusin’ event can be used to execute the business logic via AJAX call to load and render the data in the widget. The ‘focusout’ event can be used to perform validations against the widget input and alert the user about any invalid input when user moves out of the widget.