Jquery for Beginners: Events Handling Part 2 (Continue)

In previous post Jquery for Beginner: Event Handling Part 2 i have give complete list of events which are available in jquery. In previous post i have discuss the event which are related with the mouse, but in this article i will discuss events which are related to the keyboard. The keyboard events are

Event Name
Event Name
keydown()
keydown(fn)
keypress()
keypress(fn)
keyup()
keyup(fn)

Above are the list of events which are related to the keyboard. Let us start with keydown event which is fired when any of the keyboard key is down. The syntax for calling the event is as below.

$(document).ready(function()
{
$('#txtValue').keydown(function(passedEvent)
{
alert(passedEvent.keyCode);
});
});

Above code is simple example of how you can bind the keydown event handler with any of the input control you have on your web page. In the above code i just output the keyCode which is the property of the event, which is passed as argument to the keydown function. The event name is optional, if you don't want to pass the parameter you can remove the parameter. But if you need to know which key is press or some additional information when the key is down then it is helpful to pass the event.

Property
Description
altKey
Value will be true if alt key is press else false.
ctrlKey
Value will be true if ctrl key is press else false.
shiftKey
Value will be true if ctrl key is press else false.
keyCode
This Property hold the value of the key in numeric format.
which
This property hold the value of the key in numeric format, in case of key board event.
metaKey
Set to true if the Meta key was pressed when the event was triggered, false if not.The Meta key is the Ctrl key
on PCs and the Command key on Macs

In the above table , these are the some of the properties which are available when event is passed to the function which is bind with the event. Importantly, the keypress property isn’t reliable cross-browser for non-alphabetic characters. For instance, the left arrow key has a code of 37, which works reliably on keyup and keydown events. Safari returns nonstandard results for these keys on a keypress event. We can get a reliable, case-sensitive character code in the which property of keypress events. During keyup and keydown events, we can only get a case insensitive key code (so a and A both return 65), but we can determine case by checking shiftKey. The Event instance contains not only properties that give us information regarding the event that’s handled, but also possesses a handful of methods that lets us control the propagation of the event.

The which property which is used to hold the value of the key in numeric format. And if the event is cause by the mouse then it will hold the value of the mouse key which is

1. 1 for left mouse key
2. 2 for middle mouse key
3. 3 for right mouse key.
   

Key press:

The keypress event is fired after the keydown event. This is similar to the keydown event, except in the case of key repeats. The keypress and keydown event are similar but there is difference in between these two, the keydown event is fired if you press modifier keys such as shift key.But the keypress event is not fired if you press the shift key or ctrl key(control key).
One important thing to remember is that keydown and keyup event handler will give you the code which key is press which include the shift, ctrl key as well, But the keypress event key code indicate which character was entered. For example, a lowercase "a" will be reported as 65 by keydown and keyup, but as 97 by keypress. An uppercase "A" is reported as 97 by all events. This can be the primary motivator for deciding which event type to use.

key up:

The keyup event is fired after the keypress event.The keyup event is sent to an element when the user releases a key on the keyboard. It can be attached to any element, but the event is only sent to the element that has the focus. Focusable elements can vary between browsers, but form elements can always get focus so are reasonable candidates for this event type.


You can download source code from by Clicking here
back to content