在JS / jQuery中绑定箭头键

JavaScript

乐猴子樱

2020-03-16

如何在Javascript和/或jQuery中将功能绑定到左右箭头键?我看了一下jQuery的js-hotkey插件(包装了内置的bind函数以添加一个参数来识别特定的键),但是它似乎不支持箭头键。

第1852篇《在JS / jQuery中绑定箭头键》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

6个回答
LEY番长 2020.03.16

您可以检查是否arrow key按下了:

$(document).keydown(function(e){
    if (e.keyCode > 36 && e.keyCode < 41) { 
       alert( "arrowkey pressed" );
       return false;
    }
});
神奇村村 2020.03.16

除了使用return false;上面的示例中的方法外,您可以使用e.preventDefault();这样做,但更易于理解和阅读。

达蒙西门 2020.03.16

我只是简单地结合了其他答案的优点:

$(document).keydown(function(e){
    switch(e.which) {
        case $.ui.keyCode.LEFT:
        // your code here
        break;

        case $.ui.keyCode.UP:
        // your code here
        break;

        case $.ui.keyCode.RIGHT:
        // your code here
        break;

        case $.ui.keyCode.DOWN:
        // your code here
        break;

        default: return; // allow other keys to be handled
    }

    // prevent default action (eg. page moving up/down)
    // but consider accessibility (eg. user may want to use keys to choose a radio button)
    e.preventDefault();
});
西门樱前端 2020.03.16

您确定jQuery.HotKeys不支持箭头键吗?我在之前弄乱了他们的演示,并在IE7,Firefox 3.5.2和Google Chrome 2.0.172中对其进行测试时观察到左右,上下的工作情况。

编辑:看来jquery.hotkeys已重定位到Github:https : //github.com/jeresig/jquery.hotkeys

伊芙妮 2020.03.16

这有点晚了,但是HotKeys有一个非常重要的错误,如果您将多个热键附加到一个元素上,则会导致事件多次执行。只需使用普通的jQuery。

$(element).keydown(function(ev) {
    if(ev.which == $.ui.keyCode.DOWN) {
        // your code
        ev.preventDefault();
    }
});
LEY神无 2020.03.16
$(document).keydown(function(e){
    if (e.which == 37) { 
       alert("left pressed");
       return false;
    }
});

字符代码:

37-左

38以上

39-对

40-下

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android