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

发布于 2024-08-20 05:03:10 字数 344 浏览 8 评论 0原文

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

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

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

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

在 IE8 中，什么也没有。标准 QWERTY 键盘上的任何其他键都会注册，但方向键除外。

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

原文

I'm trying to set up a menu that can be navigated via the arrow keys. I have this working fin in Firefox.

Trying to get it to work in IE8 and after a bit of struggle, found that it was because IE8 wouldn't register a keypress on the arrows. To test:

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

In Firefox, pressing any of the arrow keys would trigger an alert of 37, 38, 39 or 40.

In IE8, nothing. Any other key on the standard QWERTY keyboard would register, but not the arrow keys.

Is this an issue with my Javascript? A browser setting? A Windows setting?

分享到QQ

分享到微博

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

发布评论

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

披肩女神 2024-08-27 05:03:10

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

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

它甚至从字面上提到了箭头键；）因此，您确实需要挂钩 keydown 或 keyup 事件。这是带有 keydown 的 SSCCE，只需复制“粘贴”然后运行即可。不，您不需要对事件进行浏览器兼容检查，这适用于从 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>

From the jQuery keypress documentation (the last paragraph of the introductory text):

Note that keydown and keyup provide a code indicating which key is pressed, while keypress indicates which character was entered. For example, a lowercase "a" will be reported as 65 by keydown and keyup, but as 97 by keypress. An uppercase "A" is reported as 97 by all events. Because of this distinction, when catching special keystrokes such as arrow keys, .keydown() or .keyup() is a better choice.

It even literally mentions about the arrow keys ;) Thus, you really need to hook on either the keydown or keyup events. Here's an SSCCE with keydown, just copy'n'paste'n'run it. No, you don't need to do a browser-compatible check on the event, this works in all browsers from IE6 up to with 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>

回复收藏 0 原文

预谋 2024-08-27 05:03:10

试试这个：

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

Try this:

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

回复收藏 0 原文

醉态萌生 2024-08-27 05:03:10

使用“keydown”事件

回复收藏 0 原文

南…巷孤猫 2024-08-27 05:03:10

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

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

Because I sometimes do not want events to bubble for some keys, I use something like:
Customize the codes/keys as you see fit.

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

回复收藏 0 原文

~没有更多了~