javascript - jQuery Keypress 箭头键

Question

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

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

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

我做错了什么没有捕捉到那些？

Answer 1

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

按结果屏幕聚焦（小提琴屏幕右下角），然后按箭头键查看它是否有效。

笔记：

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

更多有用信息

3. 您可以使用事件对象的.which或.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
   • ESC：27
   • 空格键：32
   • 控制：17
   • 替代：18
   • 班次：16

Answer 2

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

Keypress 事件确实检测箭头键，但并非在所有浏览器中。所以最好使用keydown。

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

• 左 = 37
• 向上 = 38
• 对 = 39
• 下降 = 40

Answer 3

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

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

jsfiddle 演示

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

});

Answer 5

请参考来自 JQuery 的链接

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

它说

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

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

Answer 6

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

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