Question

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

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

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

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

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

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

Answer 1

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

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

它甚至字面上提到了箭头键;）因此，你真的需要挂钩keydown或keyup事件。这是一个SSCCE keydown，只是复制'n'paste'n'run它。不，您不需要在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>

Answer 2

试试这个：

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

Answer 3

使用'keydown'事件

Answer 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);
});

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

4 个答案: