在JS / jQuery中绑定箭头键

loading...


391

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

16回答

  • 0
    $(document).keydown(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)
    });
    

    在相应的 casebreak 行之间放置箭头键的自定义代码 .

    e.which由jQuery规范化,因此它适用于所有浏览器 . 对于纯JavaScript方法,请将前两行替换为:

    document.onkeydown = function(e) {
        e = e || window.event;
        switch(e.which || e.keyCode) {
    

    (编辑2017)
    如果你觉得很花哨,你现在可以使用e.key而不是 e.whiche.keyCode . e.key 正在成为推荐的标准,允许您检查字符串: 'ArrowLeft''ArrowUp''ArrowRight''ArrowDown' . 新浏览器原生支持它,check here .


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

    字符代码:

    37 - 左38 - 上39 - 右40 - 下


  • 0

    你可以使用箭头键的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;
      }
    });
    

    检查上面的示例here .


  • 3

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

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

  • 9

    我只是将其他答案的最佳位组合在一起:

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

  • 22

    您可以使用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/


  • 2

    使用普通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 .


  • 14

    你确定jQuery.HotKeys不支持箭头键吗?我之前用他们的演示搞砸了,当我在IE7,Firefox 3.5.2和谷歌Chrome 2.0.172中测试它时,观察左,右,上,下工作......

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


  • 16

    您可以使用 e.preventDefault(); 而不是像上面的示例中那样使用 return false; ,它可以使用 e.preventDefault(); ,但更容易理解和阅读 .


  • 445

    向右或向左的纯js的示例

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

  • 103

    你可以使用jQuery bind:

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

  • 0

    您可以通过以下方式检查 arrow key 是否被按下:

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

  • -1

    防止箭头仅适用于任何其他对象SELECT,实际上我没有测试另一个对象LOL . 但它可以停止页面上的箭头事件和输入类型 .

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


  • 4

    一个强大的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
        }
    });
    

  • 5

    我来到这里寻找一种简单的方法让用户在专注于输入时,使用箭头键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);
        }
    });
    

  • 498

    咖啡和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()
    

loading...

评论

暂时没有评论!