Capturing KeyBoard Events in Javascript

While working with simple Javascript and HTML, we have come across various events to be used with input fields. For example :

<input type="text" id="name" onkeypress="track_key()">

The function "track_key" is called when any key is pressed (or 'keypress' event is fired) upon the input element.

There are three keyboard events, namely "keydown", "keypress" and "keyup". There are certain point which should be noted here.

1. We can enter character keys ('A','1' etc) and non-character keys ('F9', 'Del' etc)

2. If any character key is pressed, 'keydown' event is fired first, then 'keypress' event is fired. These events occur before the textbox/textarea element gets the character.

3. When the said textbox/textarea has got the character and key was released, the 'keyup' event is now fired.

4. So, if a character key is pressed and held for some time, two events "keydown" and "keypress" events are fired repeatedly until the key is released and 'keyup' event is fired. This behaviour is almost same on all browsers including IE7, Firefox and Chrome.

5. If you press any a non-character key 'F2' (or 'shift' or 'ctrl' or 'F9' etc) and hold it for a while, only "keydown" event is fired repeatedly. However firefox may fire 'keypress' event after it.

6. Which key was fired - can be tracked down by using the 'event' object's 'keyCode' property. This 'event' object is available within the browser environment. If the key is any alphanumeric one, the 'keyCode' property will hold the ASCII value against the key pressed. So, if 'A' was pressed, its ASCII value 65 will be stored in 'keyCode' property. 'A' and 'a' produce the same ASCII 65 as 'keyCode'.

7. Latest Firefox, Chrome, IE 9+ and Safari support 'charCode' property on the 'event' object which holds corresponding ASCII value during the 'keypress' event. Otherwise, old IE (may be older version of other browsers) filled 'keyCode' property in 'keyPress' event.

CheckOut some example :

Character 'a' on IE 9, Chrome 33, Firefox Nightly 29: (IE 7,8 gets 97 in 'keyCode' property)
keyDown event, (keyCode : 65) (ASCII for 'A')
keyPress event, (charCode : 97) (ASCII for 'a')
keyUp event, (keyCode : 65) (ASCII for 'A')

However, 'Shift' + 'a' ( means 'A' ) : generates ASCII 65 on all three events.

Non-character key 'ESC' generates 27 in 3 events as shown below :
IE 9 : keyDown (keyCode : 27), keyPress (charCode:27), keyUp (keyCode : 27)
Chrome 33 : keyDown (keyCode : 27), keyPress event is not fired, keyUp (keyCode : 27)
Nightly 29 : keyDown (keyCode : 27), keyPress (keyCode : 27), keyUp (keyCode : 27)


For semi-colon character, the following behaviour is seen ::
IE 9 : keyDown (keyCode : 59), keyPress (charCode : 59), keyUp (keyCode : 59)
Chrome 33 : keyDown (keyCode : 186), keyPress (charCode : 59), keyUp (keyCode : 186)
Nightly 29 : keyDown (keyCode : 59), keyPress (charCode : 59), keyUp (keyCode : 59)

The above behaviour is very puzzling. 186 is the key's position code on Keyboard.

I think, if it is a character key, we can track it by its 'charCode' property on all modern browsers.

How the above keyCodes/charCodes were obtained? Check the Javascript code below. This would show you the corresponding keyCode/charCode as you enter keys on a textbox. You can see the output on your browser console.

<script type='text/javascript'>
// The function which is called on 'keyUp' event
function keyup(e)
{
 var str = '';
 if( e.keyCode ) str = "keyCode : "+e.keyCode;
 console.log('keyUp event, ' + str);
}

// The function which is called on 'keyDown' event
function keydown(e)
{
 var str = '';
 if( e.keyCode ) str = "keyCode : "+e.keyCode;
 console.log('keyDown event, ' + str);
}

// The function which is called on 'keypress' event
function keypress(e)
{
 var str = '';
 if( e.keyCode ) str = "keyCode : "+e.keyCode;
 else if( e.charCode ) str = "charCode : "+e.charCode;
 console.log('keyPress event, ' + str);
}
</script>

<!-- The 'input' element which receives the keystrokes -->
<input type='text' name='val' onkeyup="keyup(event)" onkeydown="keydown(event)" onkeypress="keypress(event)" >

In our next tutorial Capturing Digits on a Textbox, we will do small calculation on the digits entered in a textbox.