如何在 Javascript 和/或 jQuery 中将函数绑定到左右箭头键？我查看了 jQuery 的 js-hotkey 插件（包装内置绑定函数以添加参数以识别特定键），但它似乎不支持箭头键。
在 JS/jQuery 中绑定箭头键
IT技术
javascript
jquery
keyboard
key-bindings
2021-01-29 16:45:51
6个回答
document.onkeydown = 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)
};
如果需要支持IE8，函数体以e = e || window.event; switch(e.which || e.keyCode) {.
（编辑 2020）
请注意，KeyboardEvent.which现在已弃用。请参阅此示例以KeyboardEvent.key获取更现代的解决方案来检测箭头键。
$(document).keydown(function(e){
if (e.which == 37) {
alert("left pressed");
return false;
}
});
字符代码：
37 - 左
38 - 向上
39 - 右
40 - 下
您可以使用箭头键的 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;
}
});
在这里检查上面的例子。
这有点晚了，但是 HotKeys 有一个非常严重的错误，如果您将多个热键附加到一个元素，它会导致事件多次执行。只需使用普通的 jQuery。
$(element).keydown(function(ev) {
if(ev.which == $.ui.keyCode.DOWN) {
// your code
ev.preventDefault();
}
});
我只是结合了其他答案中最好的部分：
$(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();
});