Why are arrow keys, tab, etc not received by input field's onkeypress handler in some browsers?

Question

I'm building a text input field specialized for entering and editing times. One of the parts of the functionality calls for various ways to focus on the different components of the time (hours, minutes, seconds), which I indicate through a text selection. Direct selection is possible with the mouse and this is working great. The other feature is keyboard navigation.

Most of this functionality relies on the fact that I'm able to handle keyPress events, suppress the default behavior and substitute a special action instead.

In Firefox, I have this working nicely. The user may use left/right arrow keys or tab/shift-tab to move between parts of the time (and when they get to the end, the next tab key will leave the field and focus the next element normally).

In Internet Explorer 7 (potentially others?) the arrow keys and tab are not even received by the keypress handler. If arrow keys are pressed, the text selection is lost and the cursor moves by one. The effect of providing multiple fields disappears and it results in the control feeling broken. Tab also seems to skip the handler and just immediately flips to the next focusable element.

Are there any tricks to intercepting these keys?

Answer 1

You need to use onkeydown for non-character keys. onkeypress in IE only handles keys that return a string.

To specifically quote the MSDN documentation:

As of Microsoft Internet Explorer 4.0, the onkeypress event fires and can be canceled for the following keys:

• Letters: A - Z (uppercase and lowercase)
• Numerals: 0 - 9
• Symbols: ! @ # $ % ^ & * ( ) _ - + = < [ ] { } , . / ? \ | ' ` " ~
• System: ESC, SPACEBAR, ENTER