keydown, keypress, keyup

Test page.

Events overview page.

The keydown, keypress and keyup events fire when the user presses a key.

keydown
Fires when the user depresses a key. It repeats while the user keeps the key depressed.
keypress
Fires when an actual character is being inserted in, for instance, a text input. It repeats while the user keeps the key depressed.
keyup
Fires when the user releases a key, after the default action of that key has been performed.
textinput
Fires when a character is actually added to a control. So if the user presses a character key, but the default is prevented onkeydown or onkeypress, the textinput event does not fire since the sequence does not result in a character being added.

The keydown/keypress scheme outlined above is originally a Microsoft invention that Safari 3.1 copied for reasons explained by Alexey Proskuryakov of the Safari team.

The great advantage of this theory is that it clearly explains why we need keydown and keypress to be two separate events; without some sort of difference between the two events it's rather pointless to keep both of them around.

Meanwhile the spec has also gone over to this scheme of things. Firefox and Opera still don’t get it, but they are simply wrong.

Test IE 5.5 IE 6 IE 7 IE8 IE9 IE10 pr2 FF 7.0 Win FF 6.1 Mac Saf 5.1 Win Saf 5.1 Mac Chrome 14 Win Chrome 13 Mac Opera 11.51 Win Opera 11.51 Mac
On the window
 No Yes Yes Yes Yes Yes

Are these events available on the window?
On the document
 Yes Yes Yes Yes Yes

Are these events available on the document?
On a form
 Yes Yes Yes Yes Yes

Are these events available on a form?
On focusable elements
 Yes Yes Yes Yes Yes

An important point of these events is monitoring user input in text inputs.

Key events on other focusable elements such as links and radio buttons and such don't make much sense to me, but all browsers support them.
Test IE 5.5 IE 6 IE 7 IE8 IE9 IE10 pr2 FF 7.0 Win FF 6.1 Mac Saf 5.1 Win Saf 5.1 Mac Chrome 14 Win Chrome 13 Mac Opera 11.51 Win Opera 11.51 Mac
Special keys

When the user presses special keys such as the arrow keys, the browser should NOT fire keypress events.

 Yes Incorrect Yes Yes Incorrect
I tested this with the arrow-left and the Shift keys. In both cases only the keydown event should fire.
  • Firefox and Opera fire the keypress event if the key changes something to the textarea (for instance the arrow-left key: it moves the cursor). If the key does not change anything (for instance the Shift key), they do not fire keypress.
Repeats

When the user keeps a key depressed, the keydown and keypress events, if applicable, should fire continuously.

 Yes Yes Yes Yes Incorrect
I tested this with three keys:
  1. The 'd' character key: should always repeat.
  2. The arrow-left key: should always repeat.
  3. The left Shift key: this key repeats on Windows 7 (except in Opera), but not on Mac. Not repeating it makes kind of sense, so I don’t hold this against the browsers. Be aware, however, that some special keys may not repeat.
  • Opera only repeats the keypress event, which it shouldn’t even fire when a special key is pressed.
Event bubbling

The event should bubble.

 Yes Yes Yes Yes Yes
Test IE 5.5 IE 6 IE 7 IE8 IE9 IE10 pr2 FF 7.0 Win FF 6.1 Mac Saf 5.1 Win Saf 5.1 Mac Chrome 14 Win Chrome 13 Mac Opera 11.51 Win Opera 11.51 Mac
Prevent default keydown
 Yes Yes Yes Yes No
I tested this with two keys:
  1. The 'd' character key: should not appear.
  2. The arrow-left key: cursor should not move.
Prevent default keypress

Default of special keys should NOT be prevented

 Yes Incorrect Yes Yes Incorrect
I tested this with two keys:
  1. The 'd' character key: should not appear.
  2. The arrow-left key: cursor should move. The keypress event shouldn’t fire at all here — in theory.
  • Firefox and Opera allow you to prevent the default of the special keys.
Prevent default keyup
“No” is the correct answer 		No No No No No
I tested this with two keys:
  1. The 'd' character key: should appear.
  2. The arrow-left key: cursor should move.
textinput
See above for definition 		No No Yes Yes No

Only works with addEventListener. Default is preventable: the character is not added.
Test IE 5.5 IE 6 IE 7 IE8 IE9 IE10 pr2 FF 7.0 Win FF 6.1 Mac Saf 5.1 Win Saf 5.1 Mac Chrome 14 Win Chrome 13 Mac Opera 11.51 Win Opera 11.51 Mac