在JavaScript中检测箭头键

Question

如何检测何时按下其中一个箭头键？我用这个来找出:

function checkKey(e) {
    var event = window.event ? window.event : e;
    console.log(event.keyCode)
}

虽然它适用于所有其他键,但它没有用于箭头键(可能因为默认情况下浏览器应该在这些键上滚动).

Answer 1

箭头键仅由onkeydown,而不是触发onkeypress

密钥代码是:

• 左= 37
• up = 38
• 对= 39
• 下来= 40

Answer 2

上键上下通话功能.每个密钥都有不同的代码.

document.onkeydown = checkKey;

function checkKey(e) {

    e = e || window.event;

    if (e.keyCode == '38') {
        // up arrow
    }
    else if (e.keyCode == '40') {
        // down arrow
    }
    else if (e.keyCode == '37') {
       // left arrow
    }
    else if (e.keyCode == '39') {
       // right arrow
    }

}

Answer 3

可能是最简洁的配方:

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

演示(感谢用户Angus Grant):http://jsfiddle.net/angusgrant/E3tE6/

这应该跨浏览器工作.如果有浏览器不起作用,请发表评论.

还有其他方法可以获取密钥代码(例如,e.charCode和window.event而不是e),但它们不是必需的.您可以在http://www.asquare.net/javascript/tests/KeyCode.html上尝试大部分内容.请注意,event.keycode在Firefox中不能与onkeypress一起使用,但它确实适用于onkeydown.

Answer 4

event.key ==="ArrowRight"......

更新,更清洁:使用event.key.没有更多的任意数字代码!如果您正在翻译或知道您的用户都在现代浏览器上,请使用此功能!

node.addEventListener('keydown', function(event) {
    const key = event.key; // "ArrowRight", "ArrowLeft", "ArrowUp", or "ArrowDown"
});

详细处理:

switch (event.key) {
    case "ArrowLeft":
        // Left pressed
        break;
    case "ArrowRight":
        // Right pressed
        break;
    case "ArrowUp":
        // Up pressed
        break;
    case "ArrowDown":
        // Down pressed
        break;
}

您可以轻松扩展它以检查"w", "a", "s", "d"或任何其他密钥

Mozilla文档

支持的浏览器

箭头的 PS event.code是相同的

Answer 5

使用keydown,而不是keypress用于不可打印的键,例如箭头键:

function checkKey(e) {
    e = e || window.event;
    alert(e.keyCode);
}

document.onkeydown = checkKey;

我发现的最好的JavaScript关键事件参考(例如,击败quirksmode的裤子)在这里:http://unixpapa.com/js/key.html

Answer 6

自keyCode以来的现代答案现已弃用,取而代之的是key:

document.onkeydown = function (e) {
    switch (e.key) {
        case 'ArrowUp':
            // up arrow
            break;
        case 'ArrowDown':
            // down arrow
            break;
        case 'ArrowLeft':
            // left arrow
            break;
        case 'ArrowRight':
            // right arrow
    }
};

Answer 7

function checkArrowKeys(e){
    var arrs= ['left', 'up', 'right', 'down'], 
    key= window.event? event.keyCode: e.keyCode;
    if(key && key>36 && key<41) alert(arrs[key-37]);
}
document.onkeydown= checkArrowKeys;

Answer 8

这是一个示例实现:

var targetElement = $0 || document.body;

function getArrowKeyDirection (keyCode) {
  return {
    37: 'left',
    39: 'right',
    38: 'up',
    40: 'down'
  }[keyCode];
}

function isArrowKey (keyCode) {
  return !!getArrowKeyDirection(keyCode);
}

targetElement.addEventListener('keydown', function (event) {
  var direction,
      keyCode = event.keyCode;

  if (isArrowKey(keyCode)) {
    direction = getArrowKeyDirection(keyCode);

    console.log(direction);
  }
});

Answer 9

我是这样做的:

var leftKey = 37, upKey = 38, rightKey = 39, downKey = 40;
var keystate;
document.addEventListener("keydown", function (e) {
    keystate[e.keyCode] = true;
});
document.addEventListener("keyup", function (e) {
    delete keystate[e.keyCode];
});

if (keystate[leftKey]) {
//code to be executed when left arrow key is pushed.
}
if (keystate[upKey]) {
//code to be executed when up arrow key is pushed.
}
if (keystate[rightKey]) {
//code to be executed when right arrow key is pushed.
}
if (keystate[downKey]) {
//code to be executed when down arrow key is pushed.
}

Answer 10

方向键在键盘按下时触发

$(document).on("keyup", "body", function(e) {
 if (e.keyCode == 38) {
    // up arrow
    console.log("up arrow")
  }
  if (e.keyCode == 40) {
      // down arrow
      console.log("down arrow")
  }
  if (e.keyCode == 37) {
    // left arrow
    console.log("lefy arrow")
  }
  if (e.keyCode == 39) {
    // right arrow
    console.log("right arrow")
  }
})

onkeydown 允许 ctrl、alt、狗屎

onkeyup 允许使用 Tab、向上箭头、向下箭头、向左箭头、向下箭头

Answer 11

我已经能够用jQuery捕获它们:

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

一个例子:http://jsfiddle.net/AjKjU/

Answer 12

我相信最新的方法是：

document.addEventListener("keydown", function(event) {
  event.preventDefault();
  const key = event.key; // "ArrowRight", "ArrowLeft", "ArrowUp", or "ArrowDown"
  switch (key) { // change to event.key to key to use the above variable
    case "ArrowLeft":
      // Left pressed
      <do something>
      break;
    case "ArrowRight":
      // Right pressed
      <do something>
      break;
    case "ArrowUp":
      // Up pressed
      <do something>
      break;
    case "ArrowDown":
      // Down pressed
      <do something>
      break;
  }
});

假设开发人员希望代码在页面上的任何地方都处于活动状态，并且客户端应忽略任何其他按键。消除event.preventDefault（）; 如果按键（包括此处理程序捕获的按键）仍应处于活动状态，则返回行。