IE e.keyCode - 如何区分 & 符号和向上箭头?

发布于 2024-08-23 22:08:50 字数 1701 浏览 7 评论 0原文

我正在与我试图修复的 jQuery UI 小部件上的非常奇怪的 javascript 行为作斗争。 IE7(win XP),jQuery 1.2.6(是的,这是一个旧版本)。

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

当我尝试输入“&”时将字符输入到弹性框输入字段中,我得到奇怪的行为。

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 中的方向键?

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?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

够钟 2024-08-30 22:08:50

这就是我最终所做的:

    /*
     * 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 对象)。

编辑:我更新了此代码,并删除了之前存在的正则表达式测试,我发现它有问题。

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.

薆情海 2024-08-30 22:08:50

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

I think keydown might give you more reliable data than keypress.

贵在坚持 2024-08-30 22:08:50

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

尝试从逻辑上辨别按键代码是一场噩梦。

I recommend using this jquery library to write custom handlers for keypresses:
http://code.google.com/p/js-hotkeys/

Trying to discern keycodes logically is a nightmare.

碍人泪离人颜 2024-08-30 22:08:50

向上或向下键返回 '&' 的 keyCode 55 38 代表“向上箭头”

key up or down returns a keyCode of 55 for '&' and 38 for 'Arrow Up'

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文