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 ponents 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?

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 ponents 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?

• javascript
• internet-explorer
• dom
• cross-browser
• dom-events

Share Improve this question Follow edited Sep 23, 2019 at 20:20 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Jun 25, 2009 at 13:26 Mark RenoufMark Renouf 31k1919 gold badges9696 silver badges125125 bronze badges 2

• I should add that I am testing IE7 within VMware hosted on Linux. – Mark Renouf Commented Jun 25, 2009 at 13:28
• Found this reference too: unixpapa./js/key.html – Mark Renouf Commented Jun 25, 2009 at 19:08

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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