keydown, keypress, keyup

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:

The 'd' character key: should always repeat.

The arrow-left key: should always repeat.

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:

The 'd' character key: should not appear.

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:

The 'd' character key: should not appear.

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:

The 'd' character key: should appear.

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.