Originally published on my old Charteris blog

First up this post is as much for me as it is for the person that happens upon it via a SE, this stuff is kind of confusing and I will need reminding.

Secondly I am far from an expert, only recently something blindingly obvious about Key Codes and why they are called key codes was point out to me. Thanks Richard.

KeyCode vs CharCode

A KeyCode is a not a code for a specific character; for instance the same code is returned whether or not it’s character is UPPER or lower case. The KeyCode resulting from the number 7 being pressed on the main QWERTY part of the keyboard is not the same as the KeyCode resulting from the number 7 being pressed on the num-pad.

A CharCode on the other hand does map to a specific character and that character can be obtained from the String.fromCharCode function. Do not pass a KeyCode to this function it may work for some KeyCode but on the whole you will get “wild results for many keys”. For example pressing the Down navigational key will result in a KeyCode of 40, passing that into fromCharCode will get you the “(“ character! (I’ve been there and it hurt when I kicked myself)

On the whole a KeyCode is what is used in the keyDown and keyUp events with CharCode being the one to use in keyPress. I say “on the whole” because as usual browsers do differ. JavaScript Madness: Keyboard Events is a great article for giving more detail, particularly around the differences between the browsers.

Key and Character Codes vs. Event Types is a great little page for discovering what charCode and/or KeyCode is sent as a result of a key being pressed on the keyboard.

Interestingly whilst we cannot say a KeyCode is a code for a specific character the codes do seem linked. For instance my UK keyboard gives me the KeyCode of 81 when I press the key with the letter “Q” on it however when I switch to a French keyboard that same physical key will give me a KeyCode of 65 (and the character ‘a’). Therefore we can say the KeyCode is not hard-wired to a physical key. If I press the key with the letter “A” on it, whilst in a French keyboard, I get the KeyCode of 81 (and the character ‘q’) which is what I got when I pressed the “Q” key in the UK keyboard. This tells me that the KeyCodes are linked in some way to characters but the link is not absolute and is not true for all keys.

If you are checking this out for yourself make sure you restart your browser after changing keyboard. I was testing in IE7 and the keyboard change was not picked up until after I reloaded the browser.

ASP.NET Ajax's DomEvent wrapper

Like most of the often used things in AJAX development, there is a cross browser wrapper for the standard JavaScript event object argument, DomEvent. The docs for DomEvent only ever talk about charCode. Do not do as I did and assume that the DomEvent is mapping KeyCodes and CharCodes to a single charCode member on DomEvent. The follow on form that assumption is that you should always use DomEvent.CharCode, wrong. There is a documentation error as of 4 July 2007, the docs are missing KeyCode it does exists and the current script v1.0.61025 populates it like so

if (e.type === 'keypress') {
    this.charCode = e.charCode || e.keyCode;
}

else if (e.keyCode && (e.keyCode === 46)) {
    this.keyCode = 127;
}
else {
    this.keyCode = e.keyCode;
}

Note the ‘e’ variable in this code is the original event arg that is being wrapped by DomEvent

Therefore we can safely say that when using DomEvent:

  • The KeyPress event will give us a charCode member populated from either a CharCode or a KeyCode with CharCode taking precedence.
  • The KeyDown and KeyUp events will always result in a keyCode member equal to a keyCode