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

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.

  • Load timeout for modules in Internet Explorer
  • Tooltips (title=“…”) won't show in Firefox
  • Rollback SELECT change with jQuery
  • Unable to replace onreadystate to load
  • What happens to code after a javascript redirect (setting window.location.href)?
  • javascript: href link not working in iPhone
  • 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?

  • Tab order issue in IE with initial Javascript select of field in form
  • how to reset (clear) file input
  • Cross Browser image preview in Image upload section is not working in ie8
  • How to best safely use console.log and console.warn?
  • WebKit/Phantomjs why output of getComputedStyles is that way?
  • Is there a performance difference between SVG attributes and styles?
  • One Solution collect form web for “Why are arrow keys, tab, etc not received by input field's onkeypress handler in some browsers?”

    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