在JS / jQuery中绑定箭头键


Answers:


541
document.onkeydown = function(e) {
    switch(e.which) {
        case 37: // left
        break;

        case 38: // up
        break;

        case 39: // right
        break;

        case 40: // down
        break;

        default: return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
};

如果需要支持IE8,请以形式启动功能主体e = e || window.event; switch(e.which || e.keyCode) {


(编辑2020)
请注意,KeyboardEvent.which现在已弃用。请参阅此示例,以使用KeyboardEvent.key更现代的解决方案来检测箭头键。


28
到目前为止最好的答案。使用e.which像jQuery建议跨浏览器,使用e.preventDefault()替代return falsereturn false在jQuery的事件处理程序,同时触发e.preventDefault()e.stopPropagation(),其中第二个是要造成任何后来添加事件失败,因为该事件将不会传播到它们),并在开关的末尾,如果它不是正在寻找的其他任何键而不妨碍其他键的使用,则将不进行调用而返回e.preventDefault(),而是$.ui.keyCode.DOWN与数字进行比较(速度更快)。
Jimbo Jonny 2012年

2
内森(Nathan):似乎并非所有键码在浏览器之间都是一致的,但是箭头键就是其中一些。看到这里:stackoverflow.com/questions/5603195/…–
Sygmoral

1
@MichaelScheper-1)变量!=常量,无论是否打算更改它们……引擎仍然必须将它们像vars一样对待,直到ES6常量到处可见以使jQuery可以使用常量为止2)数字不是当他们旁边有评论告诉他们确切的含义时,这真是个神奇数字,并且3)...续
Jimbo Jonny

2
... 3)访问时,$.ui.keyCode.DOWN$在词汇范围内寻找,未找到它,向上一级...寻找$,直到在全局范围内重复,在全局范围内找到它window$在窗口uiwindow.$访问,keyCode在上访问,在上访问window.$.ui,获得DOWNwindow.$.ui.keyCode去要比较原始值,然后做你的实际比较。不管速度对您而言是否重要都是个人决定,在存在我可以轻松编写/注释原语的情况下,我倾向于避免4级访问。
Jimbo Jonny

1
@NathanArthur在这里,我找到了两个不错的在线工具来测试键盘按键代码:keycode.info asquare.net/javascript/tests/KeyCode.html unixpapa.com/js/key.html
Riccardo Volpe

451
$(document).keydown(function(e){
    if (e.which == 37) { 
       alert("left pressed");
       return false;
    }
});

字符代码:

37-左

38以上

39-对

40-下


4
退货有什么目的?
Alex S

19
它将停止击中任何其他按键事件。
s_hewitt

9
阴影:不,他的意思是它阻止了keydown事件触发其他DOM元素
-JasonWoof

3
除了39也是撇号,不是吗?
Paul D. Waite,2010年

25
使用jQuery时,请使用e.which而不是e.keyCode获得更多的浏览器支持。请参阅下面我的评论。
Sygmoral 2012年

108

您可以使用箭头键的keyCode(向左,向上,向右和向下分别使用37、38、39和40):

$('.selector').keydown(function (e) {
  var arrow = { left: 37, up: 38, right: 39, down: 40 };

  switch (e.which) {
    case arrow.left:
      //..
      break;
    case arrow.up:
      //..
      break;
    case arrow.right:
      //..
      break;
    case arrow.down:
      //..
      break;
  }
});

此处检查以上示例。


1
我不确定您是否使用|| 第2行中的运算符。不是特定于零或非零实现的值,并且不能保证吗?我会使用更多类似的东西:var keyCode =(e.keyCode?e.keyCode:e.which); +1,用于使用箭头对象来赋予案例可读的名称。
Mnebuerquo

6
:如果您在使用jQuery,你不需要测试e.which The event.which property normalizes event.keyCode and event.charCode- api.jquery.com/event.which
JCM

我正在尝试将关键事件侦听器放在表上,但是它不起作用。支持键事件侦听器的选择器类型数量是否有限?
阿曼·毕马托夫

23

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

$(element).keydown(function(ev) {
    if(ev.which == $.ui.keyCode.DOWN) {
        // your code
        ev.preventDefault();
    }
});

2
+1用于使用ui键码对象。比37、38、39或40更容易理解。不确定jQuery文档明确声明要使用e。来解决浏览器差异时,为什么最重要的答案是使用e.keyCode。希望这个答案会因正确执行而获得更多认可。

2
每次按键使用$ .ui.keyCode.DOWN比使用数字要慢很多。如果担心清晰度,只需添加评论,尤其是因为每次按下任何键都必须运行它时。
Jimbo Jonny 2012年

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

1
“ ui”从哪里来?获取“ TypeError:$ .ui未定义”编辑-我缺少JQuery UI。得到了加载-没有更多的错误。
一位编码员,

3
他显然也在使用必须具有该枚举的jQuery UI。我不会为此而包括jQuery UI,顺便说一句。
Jethro Larson 2013年

14

您可以使用KeyboardJS。我为此类任务编写了库。

KeyboardJS.on('up', function() { console.log('up'); });
KeyboardJS.on('down', function() { console.log('down'); });
KeyboardJS.on('left', function() { console.log('right'); });
KeyboardJS.on('right', function() { console.log('left'); });

在此处签出库=> http://robertwhurst.github.com/KeyboardJS/


14

使用纯Javascript的简洁解决方案(感谢Sygmoral提出的改进建议):

document.onkeydown = function(e) {
    switch (e.keyCode) {
        case 37:
            alert('left');
            break;
        case 39:
            alert('right');
            break;
    }
};

另请参阅https://stackoverflow.com/a/17929007/1397061


可能还值得通过document.addEventListener('keydown', myFunction);
nathanbirrell

9

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

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


我正在阅读它说它是基于另一个库的地方,并假设支持的密钥列表仍然适用。
Alex S


4

向右或向左移动的纯js示例

        window.addEventListener('keydown', function (e) {
            // go to the right
            if (e.keyCode == 39) {

            }
            // go to the left
            if (e.keyCode == 37) {

            }
        });

3

您可以使用jQuery绑定:

$(window).bind('keydown', function(e){
    if (e.keyCode == 37) {
        console.log('left');
    } else if (e.keyCode == 38) {
        console.log('up');
    } else if (e.keyCode == 39) {
        console.log('right');
    } else if (e.keyCode == 40) {
        console.log('down');
    }
});

2

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

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

0

防止箭头仅可用于其他任何对象SELECT,那么实际上我还没有对另一个对象大声笑。但是它可以停止页面和输入类型上的箭头事件。

我已经尝试在“ kepress”,“ keydown”和“ keyup”事件上使用“ e.preventDefault()”或“ return false”更改向左和向右更改SELECT对象的值,但它仍会更改对象值。但是事件仍然告诉您按下了箭头。


0

一个强大的Javascript库,用于捕获键盘输入和输入的按键组合。它没有依赖性。

http://jaywcjlove.github.io/hotkeys/

hotkeys('right,left,up,down', function(e, handler){
    switch(handler.key){
        case "right":console.log('right');break
        case "left":console.log('left');break
        case "up":console.log('up');break
        case "down":console.log('down');break
    }
});

0

我来这里是在寻找一种简单的方法,让用户在专注于输入时,可以使用箭头键+1或-1数字输入。我从来没有找到一个好的答案,但是使以下代码看起来很不错-现在在整个站点范围内。

$("input").bind('keydown', function (e) {
    if(e.keyCode == 40 && $.isNumeric($(this).val()) ) {
        $(this).val(parseFloat($(this).val())-1.0);
    } else if(e.keyCode == 38  && $.isNumeric($(this).val()) ) { 
        $(this).val(parseFloat($(this).val())+1.0);
    }
}); 

-1

与咖啡和jQuery

  $(document).on 'keydown', (e) ->
    switch e.which
      when 37 then console.log('left key')
      when 38 then console.log('up key')
      when 39 then console.log('right key')
      when 40 then console.log('down key')
    e.preventDefault()
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.