IE e.keyCode - How can I differentiate between ampersand and up-arrow?

internet-explorer-7, javascript, jquery, keycode, keypress

Solution

This is what I ended up doing:

    /*
     * Hack around a wierd behavior in IE where "&%'(" have the same keyCodes
     * as the arrow keys.
     */
        if (keyCodeIn(e.keyCode, 55, 53, 57) && (mod & 2) && !(mod & 1)) {
            this.ignoreNextArrowKey = true;
        }
        else if (222 === e.keyCode && !(mod & 2) && !(mod & 1)) {
            this.ignoreNextArrowKey = true;
        }
        else if (keyCodeIn(e.keyCode, 38, 37, 39, 40) && this.ignoreNextArrowKey) {
            this.ignoreNextArrowKey = false;
            return;
        }

        //...

        function keyCodeIn(keyCode) {
            for(var i = 1; i < arguments.length; i++) {
                if (arguments[i] === keyCode) {
                    return true;
                }
            }
            return false;
        }

Hope this helps somebody. If you are reusing this code, you may have to adjust your usage of keyword 'this', depending on what object it refers to (here, it's a javascript object associated with the flexbox widget).

Edit: I updated this code, and removed the regular expression test that was previously there, which I discovered was buggy.

Problem

I am fighting with a very strange javascript behavior on a jQuery UI widget I'm trying to fix. IE7 (win XP), jQuery 1.2.6 (yes, it's an old version). The widget is a combo-box, which captures keyboard events and has special behaviors for the arrow keys. When I try to type the "&" character into the flexbox input field, I get strange behavior. The flexbox has some code like: ``` //initialization $myInputElement.keypress($.flexbox.process_key); $.flexbox.process_key = function process_key(e) { $.flexbox.flexboxFromInput(this).processKey(e); return true; }; //on the flexbox object's prototype: ... processKey: function processKey(e) { var mod = 0; if (typeof (e.ctrlKey) !== 'undefined') { if (e.ctrlKey) mod |= 1; if (e.shiftKey) mod |= 2; } else { if (e.modifiers & Event.CONTROL_MASK) mod |= 1; if (e.modifiers & Event.SHIFT_MASK) mod |= 2; } ... switch (e.keyCode) { case 38: // up this.prevResult(); break; case 40: // down if (this.getCtr().is(':visible')) this.nextResult(); else this.flexboxDelay(true); break; ...etc. } } ... ``` When I introduce a logging statement, what I find is that pressing "&" (shift+7) produces three keypress events: ``` INFO: Flexbox> processKey, keyCode=16, ctrl=false, shift=true INFO: Flexbox> processKey, keyCode=55, ctrl=false, shift=true INFO: Flexbox> processKey, keyCode=38, ctrl=false, shift=true ``` Apparently, keyCode 38 is both the up arrow key and the ASCII code for ampersand?? As I was writing this, it occurred to me that I can detect the keypress as "shift+7" (keyCode 55) to treat it as the ampersand key, then set some kind of flag to ignore the next keypress (which is the 38). This seems like a horrible hack. Does anybody have a better way to differentiate between special characters such as "&" and the arrow keys in IE?

Original source