代码之家 › 专栏 › 技术社区 › DA.

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

arrow-keys internet-explorer-8 jquery javascript

DA. · 技术社区 · 16 年前

我正试图建立一个菜单,可以通过箭头键导航。我在火狐中有这个工作鳍。

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

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

在火狐中,按下任何箭头键都会触发37、38、39或40的警报。

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

这是我的javascript的问题吗?浏览器设置?Windows设置?

4 回复 | 直到 16 年前

BalusC 16 年前

从 jQuery keypress documentation (引言最后一段):

注意 keydown 和 keyup 提供指示按下哪个键的代码,同时 按键 指示输入的字符。例如,小写字母“a”将在 键盘按下 和 弹起 但按97 按键 . 所有事件均报告大写“A”为97。由于这一区别,在捕捉特殊的击键(如箭头键)时, .keydown() 或 .keyup() 是更好的选择。

它甚至字面上提到箭头键;)因此,您真的需要钩住 键盘按下 或 弹起 事件。这里有一个 SSCCE 具有 键盘按下 只需复制粘贴就行了。不,您不需要在 event 这在IE6到火狐的所有浏览器中都有效。

<!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>

Skilldrick 16 年前

试试这个:

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

psychotik 16 年前

使用“keydown”事件

Mark Schultheiss 16 年前

因为我有时不希望事件在某些键上冒泡,所以我使用如下内容: 根据需要自定义代码/键。

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