Keyboard and Mouse buttons events

The Event object keeps track and lets you react to keyboard and mouse events, such as when a particular keyboard or mouse button is pressed. This is realized through 4 event handlers and a few Event object properties.

Related Tutorials

• Scripting the keyboard in JavaScript

Filter by Property/ Method:

Keyboard/ Mouse event handlers

Event Handler	Description
onkeypress	Fires when the user presses a key on the associated element (ie: document, DIV etc). A combination of onkeydown and onkeyup.
onkeydown	Fires when the user depresses a key (but not yet released) on the associated element.
onkeyup	Fires when the user releases a key after having depressed it on the associated element.
onclick	Fires when the user clicks on an element. A combination of onmousedown and onmouseup.
onmousedown	FIres when the user holds the mouse down over an element.
onmouseup	Fires when the user releases the mouse after having hold it down over the element.
ondblclick	Fires when the user double clicks the mouse over an element.

Keyboard Event object properties

Below lists the relevant properties within the Event Object that cater to keyboard actions. Recall that in IE, the event object is accessed directly via window.event, while in Firefox and other browsers, it is indirectly passed as the first parameter the callback function associated with this event.

Properties	Description
altKey, ctrlKey, shiftKey	Boolean properties that indicate whether the Alt, Ctrl, or Shift keys were pressed at time of the event.
charCode	Returns the character code of the key pressed during an onkeypress event. and is only set for keys in which a character is associated with it (ie: "a", "b", or "z"). Keys with no character association like "Shift" or "Ctrl" do not qualify. Other points: Different values are returned for upper and lowercase characters (ie: "a" versus "A"). To convert the Unicode value returned to the actual character, use String.fromCharCode(returned_charCode). This property is NOT set during onkeydown and onkeyup events. For these two events, the keyCode property below is set instead. This property is NOT available in IE, and always returns "undefined". In IE, only the keyCode property is supported. Example: document.onkeypress=function(e){  var e=window.event || e  alert("CharCode value: "+e.charCode)  alert("Character: "+String.fromCharCode(e.charCode)) }
isChar	Boolean property that indicates if the key pressed has a character associated with it. If the user pressed "F1" for example, the property returns false. Buggy as of Firefox 2.x, not supported in most other browsers (ie: IE, Opera 9 etc).
keyCode	Property indicating the key code pressed during an onkeydown and onkeyup event, and in IE, onkeypress as well. The keyCode property is set whenever a key is pressed, including non character keys like "Shift" or "Ctrl". IE only supports the keyCode property and NOT the charCode property. It is set during all three keyboard events in that browser- onkeypress, onkeyup, and onkeydown. keyCode is only set during the onkeypress event in Firefox and other browsers, while for onkeydown and onkeyup, the charCode property is set instead. The two are always mutually exclusive. To convert the key code value returned to the actual character pressed, use String.fromCharCode(returned_keyCode). Despite the fact that Firefox doesn't set the keyCode property during the onkeypress event, e.which (see below) is always set, which you can use on all three keyboard event handlers. Be careful when accessing the keyCode property during an onkeydown or onkeyup event, as it is set whenever any key is pressed, including non character keys like "Shift". This means if you try to press "Shift+a" to try and get the keyCode for "A", you will always end up getting two keyCodes instead, one for "Shift" and one for "A" in that order. What you won't get regardless is the keyCode for "a", as keyCode always returns the unicode value of the uppercase version of a character. To derive the keyCode for "a" (lowercase), you must probe the keyCode returned during the onkeypress event in IE, and since Firefox doesn't set keyCode during onkeypress, switch to e.charCode or e.which instead for that browser. Sounds confusing? Yes it is. Check out the below two examples for a more hands on explanation: Compare this example (try pressing "a" or "Shift a" in the "char" field): <form> Char: <input type="text" id="char" size="15" /> Keycode: <input type="text" id="keycode" size="15" /> </form> <script type="text/javascript"> var charfield=document.getElementById("char") charfield.onkeydown=function(e){ var e=window.event || e document.getElementById("keycode").value=e.keyCode } </script> Char: Keycode: to this example (try pressing "a" or "Shift a" in the "char" field): <form> Char: <input type="text" id="char" size="15" /> Keycode: <input type="text" id="unicode" size="15" /> </form> <script type="text/javascript"> var charfield=document.getElementById("char") charfield.onkeypress=function(e){ var e=window.event || e var keyunicode=e.charCode || e.keyCode document.getElementById("unicode").value=keyunicode } </script> Char: Keycode:
metaKey	Boolean property indicating whether the META key was pressed. NOT supported in IE.
returnValue	Set to false to cancel any default action for the event.
which	Returns the unicode value of the key pressed whether it has a character associated with it or not. Behaves similar to IE's version of the keyCode property and supported in Firefox/ Opera. NOT supported in IE.

The below table lists the Unicode character code value of the primary keys on your keyboard:

• a
  97
• A
  65
• b
  98
• B
  66
• c
  99
• C
  67
• d
  100
• D
  68
• e
  101
• E
  69
• f
  102
• F
  70

• g
  103
• G
  71
• h
  104
• H
  72
• i
  105
• I
  73
• j
  106
• J
  74
• k
  107
• K
  75
• l
  108
• L
  76

• m
  109
• M
  77
• n
  110
• N
  78
• o
  111
• O
  79
• p
  112
• P
  80
• q
  113
• Q
  81
• r
  114
• R
  82

• s
  115
• S
  83
• t
  116
• T
  84
• u
  117
• U
  85
• v
  118
• V
  86
• w
  119
• W
  87
• x
  120
• X
  88

• y
  121
• Y
  89
• z
  122
• Z
  90

• 0
  48
• 1
  49
• 2
  50
• 3
  51
• 4
  52
• 5
  53

• 6
  54
• 7
  55
• 8
  56
• 9
  57

• F1
  112
• F2
  113
• F3
  114
• F4
  115
• F5
  116
• F6
  117

• F7
  118
• F8
  119
• F9
  120
• F10
  121
• F11
  122
• F12
  123

• Space
  32
• BackSpace
  8
• Enter
  13
• Shift
  16
• Ctrl
  17
• Alt
  18

Mouse Event object properties

Below lists the relevant properties within the Event Object that cater to which mouse button(s) was pressed.

Properties	Description
button	An integer indicating which mouse button was pressed: 0 = left button 2 = right button 1 = middle button You should not count on this order across browsers and different mouse devices. In IE6 and lower for example, 1 is used to indicate left button instead, for example.

Example- Live validation of a text field to only allow alphabetical (upper and lower case), SPACE and the BACKSPACE keys.

The following example uses the Event Object and keyboard related properties to only allow alphabetical keys plus BACKSPACE and SPACE in a form field.
Demo: