How to avoid magic numbers when matching an event.keyCode in Javascript

Question

Can I avoid magic numbers when matching keypresses in Javascript?

An example would be using 13 to match the enter key.

I could specify my own constants, but I don't know if these values are stable enough across different platforms/browsers/locales.

Answer 1

The first time I tried to do this, I used the charCodeAt method of String. For example, if you wanted to detect the press of the "a" key:

if ("A".charCodeAt(0) == event.keyCode) {
  /* Do stuff here. */
}

Notice that I used the upper case "A" instead of "a". This is because event.keyCode is only reported as the Unicode value of the upper case letter (if it is an alpha key). What makes this problem a little hairy is that there are several ways to get the Unicode value for the key which was pressed. In Firefox you have:

• event.keyCode
• event.charCode
• event.which

According to the Mozilla developer documentation, the Unicode value of the key will be stored in either event.keyCode or event.charCode, but not both. Regardless of which one has the code, it will also be stored in event.which. However, if the value is stored in charCode, it will be case sensitive. So, depending on where you get your events from, you may have to check against both "a" and "A". If you have the luxury of only getting your key event from the "onkeydown" event, and you are targeting Firefox, you can count on getting the case-insensitive (upper case) code set in event.keyCode. In fact, I tested this on Firefox 3.0.3 on Windows XP, Firefox 3.0.4 on MacOS 10.4, Safari 3.2.1 on MacOS 10.4, and OmniWeb 5.8 on MacOS 10.4, and it all works the same. However, I have not tried this on any of the IE versions, or Opera, etc.

If you want to develop this from scratch on your own. I would suggest getting as many different browsers as you can find on as many different operating systems as you have access to, and doing some experimenting to find out how each browser reports key codes. However, someone has already done that work. It was even mentioned in one of the answers to the question you linked as your example! It is a plug-in for jQuery called js-hotkeys. It allows you to register callback functions to be executed when a key, or key combination is pressed. An example usage I've copied from the project's site:

$(document).bind('keydown', 'Ctrl+a', fn);

It has been tested to work on a variety of different browsers/platforms, so if you are using jQuery, this is probably the way to go. If you don't want to use jQuery for some reason, you aren't out of luck. Apparently this was based on another script which you could use instead. I haven't yet made use of either of these libraries personally, so I cannot vouch for their ease of use or efficacy. That said, if I had your problem, that is the direction I would look to solve it.