通过javascript/jQuery检测IE中的箭头键按下答案

【问题标题】：Detecting Arrow key press in IE via javascript/jQuery通过javascript/jQuery检测IE中的箭头键按下
【发布时间】：2010-02-07 17:29:23
【问题描述】：

我正在尝试设置一个可以通过箭头键导航的菜单。我在 Firefox 中有这个工作鳍。

试图让它在 IE8 中工作，经过一番挣扎，发现这是因为 IE8 不会在箭头上注册按键。测试：

$(document).keypress(function (eh){ 
    alert(eh.keyCode);
};

在 Firefox 中，按任意箭头键会触发 37、38、39 或 40 的警报。

在 IE8 中，什么都没有。标准 QWERTY 键盘上的任何其他键都会注册，但箭头键不会注册。

这是我的 Javascript 的问题吗？浏览器设置？ Windows 设置？

【问题讨论】：

请不要忘记测试用户是否也按下了 Alt 键。当您使用和进行导航同时阻止使用和来回浏览的默认行为时，这是非常糟糕的行为。
@Marcel alt-arrow 导航有什么作用？我从未使用过它，它似乎在我使用的浏览器中也没有任何作用。
至少在 Firefox、Chrome 和 IE 中（只是一个快速测试）与按下后退按钮相同，就像按下前进按钮（我非常经常使用这些热键）。

标签： javascript jquery internet-explorer-8 arrow-keys

【解决方案1】：

来自jQuery keypress documentation（介绍性文字的最后一段）：

请注意，keydown 和 keyup 提供了一个代码，指示按下了哪个键，而keypress 指示输入了哪个字符。例如，keydown 和 keyup 将报告小写字母“a”为 65，但 keypress 将报告为 97。所有事件都将大写“A”报告为 97。由于这种区别，当捕捉特殊按键（如箭头键）时，.keydown() 或 .keyup() 是更好的选择。

它甚至直接提到了箭头键；）因此，您确实需要挂钩keydown 或keyup 事件。这是SSCCE 和keydown，只需复制'n'粘贴'n'运行它。不，您不需要对 event 进行浏览器兼容检查，这适用于从 IE6 到 Firefox 的所有浏览器。

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2217553</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script>
            $(document).keydown(function(event) {
                switch (event.keyCode) {
                    case 37: alert('left'); break;
                    case 38: alert('up'); break;
                    case 39: alert('right'); break;
                    case 40: alert('down'); break;
                }
            });
        </script>
    </head>
    <body>
       <p>Press one of the arrow keys.</p> 
    </body>
</html>

【讨论】：

+1 为您提供详尽的答案。 -1 对我来说不是 RTFMing。 ;o)
对于以后遇到此问题的人，请注意您应该为$(document) 使用keydown 事件，而不是$(window)（这是我遇到的问题）。

【解决方案2】：

试试这个：

$(document).keydown(function (e) {
    if(!e) {
        e = window.event;
    }
    switch(e.keyCode) {
    case 37:
        goLeft();
        break;
    case 39:
        goRight();
        break;
    }
});

【讨论】：

jQuery 是否需要检查window.event？我知道它消除了这样做的需要。

【解决方案3】：

使用“keydown”事件

【讨论】：

【解决方案4】：

因为我有时不希望某些键的事件冒泡，所以我使用类似的东西：自定义您认为合适的代码/键。

/* handle special key press */
function checkCptKey(e)
{
    var shouldBubble = true;
    switch (e.keyCode)
    {
        // user pressed the Tab                                                                                                                                        
        case 9:
            {
                $(".someSelect").toggleClass("classSelectVisible");
                shouldBubble = false;
                break;
            };
            // user pressed the Enter    
        case 13:
            {
                $(".someSelect").toggleClass("classSelectVisible");
                break;
            };
            // user pressed the ESC
        case 27:
            {
                $(".someSelect").toggleClass("classSelectVisible");
                break;
            };
    };
    /* this propogates the jQuery event if true */
    return shouldBubble;
};

/* user pressed special keys while in Selector */
$(".mySelect").keydown(function(e)
{
    return checkCptKey(e);
});

【讨论】：