在JS/jQuery中绑定箭头键

Question

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

Answer 1

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

在对应case和break行之间放置箭头键的自定义代码.

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

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

(编辑2017)
如果你觉得很花哨,你可以e.key代替e.which或e.keyCode现在使用.e.key正在成为一个推荐标准,让您核对字符串:'ArrowLeft','ArrowUp','ArrowRight','ArrowDown'.新浏览器原生支持它,请点击此处.

Answer 2

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

字符代码:

37-左

38 - 起来

39 - 对

40 - 下来

Answer 3

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

在这里查看上面的例子.

Answer 4

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

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

Answer 5

我简单地将其他答案的最佳位组合在一起:

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

Answer 6

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

Answer 7

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

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

另请参阅/sf/answers/1255030521/.

Answer 8

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

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

Answer 9

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