通过javascript/jQuery在IE中检测箭头键按下

Question

通过javascript/jQuery在IE中检测箭头键按下

javascriptjqueryinternet-explorer-8arrow-keys

15

我正在尝试设置一个可以通过箭头键导航的菜单。在Firefox中，我已经成功实现了这个功能。

但是，在尝试让它在IE8中工作时，经过一番努力，发现这是因为IE8不会在箭头键上注册按键事件。为测试：

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

在Firefox中，按下任何一个箭头键都会触发一个37、38、39或40的警报。

但在IE8中，没有反应。标准QWERTY键盘上的任何其他键都可以注册，但箭头键不能。

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

- DA.

1

请不要忘记测试用户是否按下了Alt键。当您在导航时使用<left>和<right>，同时阻止使用<Alt-left>和<Alt-right>进行前后浏览的默认行为时，这是非常糟糕的行为。 - Marcel Korpel

@Marcel，alt-arrow导航是什么？我从未使用过它，也似乎在我使用的浏览器中没有任何作用。 - DA.

至少在Firefox、Chrome和IE中（只是一个快速测试），<Alt-left>与按下后退按钮相同，<Alt-right>就像按下前进按钮一样（我经常使用这些热键）。 - Marcel Korpel

4个回答

7

试试这个：

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

- Skilldrick

使用jQuery时，是否需要检查window.event？我理解它已经不需要这样做了。 - Tim Down

2

使用 'keydown' 事件。

- psychotik

1

因为有时我不希望某些键的事件冒泡，所以我会使用类似以下的代码：根据您的需要自定义代码/键。

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

- Mark Schultheiss

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BalusC · Accepted Answer

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

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

它甚至字面上提到了箭头键;) 因此，您确实需要挂钩keydown或keyup事件。这里有一个带有keydown的SSCCE，只需复制粘贴并运行即可。不，您不需要在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>