JavaScript/jQuery: Keypress for keyboard navigatio

Question

When handling key[Up|Down|Press] events, should I use .which or .keyCode? Can I have some example code for handling the three keyboard events in jQuery? Can you do it without jQuery? I want it to work reliably in every browser.

Update

Strangely, jQuery's event.which normalization wasn't working for my handleKeyPress(event) handler:

// Add which for key events
if ( !event.which && ((event.charCode || event.charCode === 0) ? event.charCode : event.keyCode) ) {
    event.which = event.charCode || event.keyCode;
}

I'm getting this before and after this normalization inside handleKeyPress (it's not setting event.which to the value in event.keyCode):

• event.which = 0
• event.charCode = 0
• event.keyCode = 40

However, the code works if I use handleKeyDown instead. I think it has to do with keypress vs. keydown; the code works for my handleKeyDown(event) handler.

Unfortunately, I need to use keypress (not keydown), since I want to use the arrow-keys for navigation: if the user presses and holds an arrow key, a keydown event is triggered once, but separate keypress events are triggered for each inserted character).

Answer 1

Please refer to this thread related to your issue.

In general, I often argue for .which, as it will allow you to keep track of both charCodes and keyCodes. event.which was built into jQuery in order to normalize those different methodologies.

You can find more information about keyCodes here.

Answer 2

jQuery normalizes event.which (see: api.jquery.com/event.which/), so that's all you need.

Answer 3

According to this page:

event.which is undefined in IE<9 on keydown and keyup.

event.keyCode is 0 in Gecko (Seamonkey, Firefox) on keypress for keys that return a character.

event.charCode is only supported on keydown and keyup by Internet Explorer (Mac).

Try it on JSFiddle

Answer 4

Refer to jQuery API for documentation on keypress(), which you can bind. http://api.jquery.com/keypress/

Also, here is a good walkthrough for making a keypress navigation using jquery: http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-a-keypress-navigation-using-jquery/

EDIT: Important/more relevant lines from the API:

If key presses anywhere need to be caught (for example, to implement global shortcut keys on a page), it is useful to attach this behavior to the document object. Because of event bubbling, all key presses will make their way up the DOM to the document object unless explicitly stopped.

To determine which character was entered, we can examine the event object that is passed to the handler function. While browsers use differing attributes to store this information, jQuery normalizes the .which attribute so we can reliably use it to retrieve the character code.

Note that keydown and keyup provide a code indicating which key is pressed, while keypress indicates which character was entered. For example, a lowercase "a" will be reported as 65 by keydown and keyup, but as 97 by keypress. An uppercase "A" is reported as 65 by all events. Because of this distinction, when catching special keystrokes such as arrow keys, .keydown() or .keyup() is a better choice.