IE e.keyCode - 如何区分 & 和向上箭头？答案

【问题标题】：IE e.keyCode - How can I differentiate between ampersand and up-arrow?IE e.keyCode - 如何区分 & 和向上箭头？
【发布时间】：2010-03-04 00:04:01
【问题描述】：

我正在尝试修复一个 jQuery UI 小部件上的一个非常奇怪的 javascript 行为。 IE7（win XP），jQuery 1.2.6（是的，它是旧版本）。

小部件是一个组合框，它捕获键盘事件并具有箭头键的特殊行为。

当我尝试在 flexbox 输入字段中键入“&”字符时，我得到了奇怪的行为。

flexbox 有如下代码：

//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.
           }
    }
...

当我引入日志语句时，我发现按“&”（shift+7）会产生三个按键事件：

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

显然，keyCode 38 既是向上箭头键，又是 & 的 ASCII 码？？

在我写这篇文章时，我突然想到我可以将按键检测为“shift+7”（keyCode 55）以将其视为 & 键，然后设置某种标志以忽略下一个按键（是 38）。这似乎是一个可怕的黑客攻击。

是否有更好的方法来区分特殊字符（例如“&”）和 IE 中的箭头键？

【问题讨论】：

我认为它充分说明了 IE，箭头键的 keyCodes 形成了一张愤怒的悲伤脸：%&'(（在评论文本输入字体中效果更好）

标签： javascript jquery internet-explorer-7 keypress keycode

【解决方案1】：

这就是我最终做的：

    /*
     * 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;
        }

希望这对某人有所帮助。如果您要重用此代码，您可能需要调整关键字“this”的使用，具体取决于它所指的对象（这里，它是与 flexbox 小部件关联的 javascript 对象）。

编辑：我更新了这段代码，并删除了之前的正则表达式测试，我发现它有问题。

【讨论】：

【解决方案2】：

我认为keydown 可能会比keypress 提供更可靠的数据。

【讨论】：

感谢您的回复！我不确定在我的情况下这是否是一个可行的选择。每当用户对输入进行更改时，我都需要捕获事件（无论它是否是箭头键）。如果用户按住字母键，我认为keydown事件只会触发一次，对于输入的第一个字母，而不是每次更改？

【解决方案3】：

我建议使用这个 jquery 库来为按键编写自定义处理程序： http://code.google.com/p/js-hotkeys/

试图从逻辑上辨别键码是一场噩梦。

【讨论】：

【解决方案4】：

key up 或 down 返回一个 keyCode 为 55 代表 '&' 和 38 代表 'Arrow Up'

【讨论】：

查看我对 Tobias 回答的评论