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
that.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.
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.
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.
Exactly what I needed. This thing rocks!
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
Seems like Ajaxian doesn’t like Code :)
http://www.tapper-ware.net/keyfoo.html
The char table is found at line 166
We have already fixed these issues a long time ago in our framework qooxdoo. Have a look yourself here in our blog:
Key Event Nightmare Resolved
I think it should not be that problematic to port the implementation to other frameworks / libraries.
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.
@Aaron Pepper, actually, I know some people who do use it… It’s a quick web browser and the interface is very SIMPLE.