• Menu
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

JavaBeat

Java Tutorial Blog

  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)

jQuery Event Handling – Key Events

January 22, 2013 //  by Ganesh Prakhya//  Leave a Comment

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:

  • Introduction to jQuery
  • jQuery Selectors : ID selector, Class selector and Element selector
<!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>

key_events-demo

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.

also read:

  • Introduction to jQuery
  • jQuery Selectors : ID selector, Class selector and Element selector

Category: jQuery

About Ganesh Prakhya

Previous Post: «jquery jQuery Event Handling – Mouse Events
Next Post: Execute batch file or shell script using Ant »

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow Us

  • Facebook
  • Pinterest

FEATURED TUTORIALS

New Features in Spring Boot 1.4

Difference Between @RequestParam and @PathVariable in Spring MVC

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Introductiion to Jakarta Struts

What’s new in Struts 2.0? – Struts 2.0 Framework

JavaBeat

Copyright © by JavaBeat · All rights reserved
Privacy Policy | Contact