jQuery 按键箭头键

jQuery Keypress Arrow Keys

提问by RedBassett

I'm attempting to capture arrow key presses in jQuery, but no events are being triggered.

我试图在 jQuery 中捕获箭头键按下，但没有触发任何事件。

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

This generates events for alphanumeric keys, but delete, arrow keys, etc generate no event.

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

What am I doing wrong to not be capturing those?

不捕捉那些我做错了什么？

回答by Shlomi Hassid

You should use .keydown()because .keypress()will ignore "Arrows", for catching the key type use e.which

您应该使用.keydown()因为.keypress()将忽略“箭头”，用于捕获键类型使用e.which

Press the result screen to focus (bottom right on fiddle screen) and then press arrow keys to see it work.

按结果屏幕聚焦（小提琴屏幕右下角），然后按箭头键查看它的工作。

Notes:

笔记：

1. .keypress()will never be fired with Shift, Esc, and Delete but .keydown()will.
2. Actually .keypress()in some browser will be triggered by arrow keys but its not cross-browser so its more reliable to use .keydown().

1. .keypress()永远不会被 Shift、Esc 和 Delete 触发，但.keydown()会。
2. 实际上.keypress()在某些浏览器中会由箭头键触发，但它不是跨浏览器，因此使用更可靠.keydown()。

More useful information

更多有用信息

1. You can use .whichOr .keyCodeof the event object - Some browsers won't support one of them but when using jQuery its safe to use the both since jQuery standardizes things. (I prefer .whichnever had a problem with).
2. To detect a ctrl | alt | shift | METApress with the actual captured key you should check the following properties of the event object - They will be set to TRUE if they were pressed:
   • event.ctrlKey- ctrl
   • event.altKey- alt
   • event.shiftKey- shift
   • event.metaKey- META ( Command ? OR Windows Key)

3. Finally - here are some useful key codes ( For a full list - keycode-cheatsheet):

   • Enter: 13
   • Up: 38
   • Down: 40
   • Right: 39
   • Left: 37
   • Esc: 27
   • SpaceBar: 32
   • Ctrl: 17
   • Alt: 18
   • Shift: 16

3. 您可以使用事件对象的.whichOr .keyCode- 有些浏览器不支持其中之一，但是当使用 jQuery 时，可以安全地使用两者，因为 jQuery 标准化了事物。（我更喜欢.which从来没有遇到过问题）。
4. 要ctrl | alt | shift | META使用实际捕获的键检测按下，您应该检查事件对象的以下属性 - 如果它们被按下，它们将被设置为 TRUE：
   • event.ctrlKey- 控制
   • event.altKey- 替代
   • event.shiftKey- 转移
   • event.metaKey- META（命令？或 Windows 键）

5. 最后 - 这里有一些有用的密钥代码（对于完整列表 - keycode-cheatsheet）：

   • 输入：13
   • 最多：38
   • 向下：40
   • 右：39
   • 左：37
   • 退出：27
   • 空格键：32
   • 控制：17
   • 替代：18
   • 班次：16

回答by Harsha Venkatram

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

Keypress events do detect arrow keys, but not in all browsers. So it's better to use keydown.

Keypress 事件会检测箭头键，但不是在所有浏览器中。所以最好使用keydown。

These are keycodes you should be getting in your console log:

这些是您应该在控制台日志中获得的键码：

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

• 左 = 37
• 向上 = 38
• 右 = 39
• 向下 = 40

回答by suhailvs

You can check wether an arrow key is pressed by:

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

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

jsfiddle demo

jsfiddle 演示

回答by Bhaskara Arani

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

});

});

回答by Tatha

Please refer the link from JQuery

请参考 JQuery 的链接

http://api.jquery.com/keypress/

http://api.jquery.com/keypress/

It says

它说

The keypress event is sent to an element when the browser registers keyboard input. This is similar to the keydown event, except that modifier and non-printing keys such as Shift, Esc, and delete trigger keydown events but not keypress events. Other differences between the two events may arise depending on platform and browser.

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

That means you can not use keypress in case of arrows.

这意味着您不能在箭头的情况下使用按键。

回答by Bharath Mb

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

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