Thursday, November 15th, 2007

JavaScript Madness: Keyboard Events

Category: JavaScript

Jan Wolter has done the ugly work of testing keyboard event handling across platforms and browses. He has a test script that you can run yourself.

You get to read about cute variations:

If a key is held down long enough it typically auto-repeats. (Note that modifier keys never auto-repeat.) In all browsers, each auto-repeat triggers more events. In most browsers, an autorepeat is sensibly treated as a character event, but not a key event, so it triggers a keypress but not a keydown or keyup. But, of course, there is some variation

And you get the conclusion:

It’s truely impressive what an hopeless hash has been made of a simple thing
like recognizing a key pressed on the keyboard.
You’d think computer technology would have advanced far enough by now to
have this all worked out better.

The keypress events are generally the easiest to work
with. Except for some confusion with arrow keys, it’s usually easy to
identify which key was pressed. You can get the character typed by doing:

     String.fromCharCode(event.charCode ? event.charCode : event.keyCode);

For keydown and keyup events, you
can identify most common keys (letters, numbers, and a few others)
by just looking at the event.keyCode and more or less
pretending that it is an ASCII code.
However, it isn’t really,
and the many Javascript manuals that say it can be converted to
a character by doing “String.fromCharCode(event.keyCode)
are wrong. On keydown and keyup events,
the key codes are not character codes,
and this conversion will give wild results for many keys.
There is no general portable way to convert keycodes to characters.
You pretty much have to sense the browser type and base the key mapping on

Because of bugs, many keys cannot be distinguished on keydown
and keyup in Macintosh Gecko and arrow keys cannot be
distinguished on keypress events in Windows Safari.

Hope for sanity exists, with DOM3, but it has not yet arrived.

Posted by Dion Almaer at 7:19 am

3.9 rating from 28 votes


Comments feed TrackBack URI

This is a pretty good article. It’s always nice when someone else does the legwork with this kind of stuff. I didn’t know Windows Safari didn’t support arrow key key press events…. Makes me glad nobody is using it.

Comment by Aaron Pepper — November 15, 2007

I had to find this out the hard way, unfortunately. Saw this a while ago, it’s a good summary of the existing implementations of the keyevents and I’ll be using it for reference the next time I’m confronted with them. It’s a shame detecting arrowkeys is impossible to accomplish across all platforms.

Comment by Anonymous — November 15, 2007

Exactly what I needed. This thing rocks!

Comment by Alex — November 15, 2007

This could be of interest to people trying to handle keyup events:

It’s a map for German keycodes on keyup/firefox … would be nice if people could post the maps for other languages and browsers (note that a-z and 0-9 are indeed left out as they are computed using
if((cc>=48 && cc=65 && cc

Comment by Hans Schmucker — November 15, 2007

Seems like Ajaxian doesn’t like Code :)

The char table is found at line 166

Comment by Hans Schmucker — November 15, 2007

Congrat’s Jan Wolter! With Web 2.0 event driven and asynchronous requesting applications becoming everyday more and more popular, this kind of work one of the most important! I really dream with a world where mouse and keyboard clicks are standardized and this is for sure a great step forward.

Comment by Fabio Zendhi Nagao — November 16, 2007

@Aaron Pepper, actually, I know some people who do use it… It’s a quick web browser and the interface is very SIMPLE.

Comment by Web Design NY — November 18, 2007

Leave a comment

You must be logged in to post a comment.