jQuery按键事件之箭头键

Question

我正在尝试在jQuery中捕获箭头按键，但没有事件被触发。

$(function(){
    $('html').keypress(function(e){
        console.log(e);
    });
});

这会生成字母数字键的事件，但删除、箭头键等不会生成事件。

我做错了什么以至于无法捕获它们呢？

- RedBassett

Answer 1

你应该使用.keydown()，因为.keypress()会忽略"箭头"键，如果要捕获按键类型，请使用e.which。

点击结果屏幕以进行聚焦（在fiddle屏幕右下角），然后按箭头键即可查看其工作情况。

注意：

1. .keypress()永远不会触发Shift，Esc和Delete，但是.keydown()会。
2. 实际上，某些浏览器中的.keypress()将通过箭头键触发，但跨浏览器支持性并不好，因此使用.keydown()更加可靠。

更多有用信息：

3. 您可以使用事件对象的.which或.keyCode - 一些浏览器不支持其中之一，但是在使用jQuery时可以安全地使用两者，因为jQuery对这些事物进行了标准化。（我更喜欢.which从未遇到过问题）。
4. 要检测与实际捕获键一起按下的ctrl | alt | shift | META ，您应该检查事件对象的以下属性-如果它们被按下，则它们将设置为TRUE：
   • event.ctrlKey- ctrl
   • event.altKey- alt
   • event.shiftKey- shift
   • event.metaKey- META（Command ⌘或Windows键）
5. 最后-这里是一些有用的键码（完整列表请参见keycode-cheatsheet）：
• Enter：13
• Up：38
• Down：40
• Right：39
• Left：37

Esc: 27

空格键：32

Ctrl： 17

Alt： 18

Shift： 16

- Shlomi Hassid

---

@Isaac 太棒了，编辑答案很好 +1 - 请注意它也会映射到Windows Command键。谢谢。 - Shlomi Hassid

使用按键会导致页面不幸滚动。在事件中添加preventDefault()以防止这种情况发生。 - JSON

Answer 2

$(document).keydown(function(e) {
    console.log(e.keyCode);
});

按键事件可以检测到箭头键，但不是所有浏览器都支持。因此最好使用 keydown 事件。

以下是你应该在控制台日志中收到的按键代码：

• 左箭头 = 37
• 上箭头 = 38
• 右箭头 = 39
• 下箭头 = 40

- Harsha Venkatram

---

在 Chrome 上它对我没用，但 keydown 可以起作用。引自 http://api.jquery.com/keypress/请注意，keydown 和 keyup 提供指示按下了哪个键的代码，而 keypress 则指示输入了哪个字符。例如，小写字母"a"将通过 keydown 和 keyup 报告为 65，但通过 keypress 报告为 97。所有事件都会报告大写字母"A"为 65。由于这种区别，在捕获箭头等特殊击键时，.keydown() 或 .keyup() 是更好的选择。 - Harsha Venkataramu

按键事件在某些浏览器中可能会通过箭头键触发，你是对的，但在其他浏览器中它会有不同的行为，因此最好使用keydown事件。 - Shlomi Hassid

我没有提到我只在Firefox上测试过。而且，keypress和keydown一样都显示给我40和38。 - Christian Heinrichs

Answer 3

您可以通过以下方法检查是否按下箭头键：

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

jsfiddle demo

- suhailvs

Answer 4

left = 37,up = 38, right = 39,down = 40

$(document).keydown(function(e) {
switch(e.which) {
    case 37:
    $( "#prev" ).click();
    break;

    case 38:
    $( "#prev" ).click();
    break;

    case 39:
    $( "#next" ).click();
    break;

    case 40:
    $( "#next" ).click();
    break;

    default: return;
}
e.preventDefault();

});

- Bhaskara Arani

---

谢谢您的回复。为了使这个答案可用，请考虑添加一些解释，说明您的代码片段是做什么的，为什么它是正确的，以及我在最初的问题中做错了什么。 - RedBassett

将$('html')更改为$(document)，并将keypress更改为keydown。 - Bhaskara Arani

Answer 5

请参考JQuery链接：http://api.jquery.com/keypress/ 其中写道：

键按下事件会在浏览器注册键盘输入时发送到元素。这类似于keydown事件，但是修改键和非打印键（例如Shift、Esc和delete）会触发keydown事件而不会触发keypress事件。根据平台和浏览器的不同，这两个事件之间可能存在其他差异。

这意味着您不能在箭头上使用keypress。

- Tatha

Answer 6

$(document).on( "keydown",  keyPressed);

function keyPressed (e){
    e = e || window.e;
    var newchar = e.which || e.keyCode;
    alert(newchar)
}

- Bharath Mb