Javascript keystroke handler

Javascript Madness Intro

JavaScript Madness: Keyboard Events
Jan Wolter
1. Introduction
This document summarizes the results of some browser tests done while attempting to implement key stroke handling code in JavaScript. It documents inconsistancies in the way different browsers implement keyboard events.

The tests were originally done with the intention of learning just enough to write the code I needed to write. Coverage has expanded considerably since then, but the results here still are not comprehensive or authoritative and do not cover all aspects of keyboard event handling.

This data is based on tests of many, many browsers over many, many years, but is not comprehensive. I update it periodically as new browsers cross my desktop. The browser versions most recently tested are:

Windows Macintosh Linux
Internet Explorer 8.0.7600.16385 5.2 –
Firefox 3.5.5
(Gecko 1.9.1.5) 3.6.3
(Gecko 1.9.2.3) 3.5.5
(Gecko 1.9.1.5)
Safari 4.0.4
(WebKit 531.21.10) 4.0 beta –
Chrome 3.0.195.33
(WebKit 532.0) – 4.0.249.43 Beta
(WebKit 532.5)
Opera 10.53 9.10 10.10
Konqueror – – 4.3.1

This document does not cover the behavior of keypad keys on the Macintosh, because none of my Macs have keypads.

This document will usually refer to “Gecko” instead of “Firefox” and to “WebKit” instead of “Safari” or “Chrome”. That’s because browser behavior usually depends on the rendering engine, and different browsers that use the same rendering engine work the same. See the Layout Engine page for more information, including mappings of layout engine versions to browser versions.

Previous versions of this document included coverage of the iCab 3 browser, but iCab has switched to using the WebKit rendering engine, and so presumably behaves exactly like Safari. Since it

is unlikely that many web developers will want to go out of their way to support iCab 3, that material has been removed from this document and archived in a separate report on iCab 3.

2. Event Triggering
In all recent browsers, pressing a key triggers a series of Javascript events which can be captured and handled. These events, however, were not defined by any standard until DOM3 which few browsers have yet implemented.

There is strong agreement across all browsers about which events should be sent and what order they should be sent in when a key is pressed:
Browser Events sent when normal key is typed
WebKit ≥ 525 keydown
Keypress
TextInput

Keyup
All Others keydown
Keypress

Keyup

Windows versions of Opera have a bit of buggy behavior: when you type the +, -, *, or / keys on the keypad, then two keypress events are triggered instead of one. This has been observed on Opera 11 and Opera 8.5. I don’t know how long this bug has been around.

The keydown event occurs when the key is pressed, followed immediately by the keypress event, and possibly the textInput event. Then the keyup event is generated when the key is released.

To understand the difference between keydown and keypress, it is useful to distinguish between “characters” and “keys”. A “key” is a physical button on the computer’s keyboard. A “character” is a symbol typed by pressing a button. On a US keyboard, hitting the 4 key while holding down the Shift key typically produces a “dollar sign” character. This is not necessarily the case on every keyboard in the world.