Answers:
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
更现代的解决方案来检测箭头键。
e.which
像jQuery建议跨浏览器,使用e.preventDefault()
替代return false
(return false
在jQuery的事件处理程序,同时触发e.preventDefault()
和e.stopPropagation()
,其中第二个是要造成任何后来添加事件失败,因为该事件将不会传播到它们),并在开关的末尾,如果它不是正在寻找的其他任何键而不妨碍其他键的使用,则将不进行调用而返回e.preventDefault()
,而是$.ui.keyCode.DOWN
与数字进行比较(速度更快)。
$.ui.keyCode.DOWN
您$
在词汇范围内寻找,未找到它,向上一级...寻找$
,直到在全局范围内重复,在全局范围内找到它window
,$
在窗口ui
上window.$
访问,keyCode
在上访问,在上访问window.$.ui
,获得DOWN
在window.$.ui.keyCode
去要比较原始值,然后做你的实际比较。不管速度对您而言是否重要都是个人决定,在存在我可以轻松编写/注释原语的情况下,我倾向于避免4级访问。
$(document).keydown(function(e){
if (e.which == 37) {
alert("left pressed");
return false;
}
});
字符代码:
37-左
38以上
39-对
40-下
e.which
而不是e.keyCode
获得更多的浏览器支持。请参阅下面我的评论。
您可以使用箭头键的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;
}
});
在此处检查以上示例。
The event.which property normalizes event.keyCode and event.charCode
- api.jquery.com/event.which
这有点晚了,但是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();
});
您可以使用KeyboardJS。我为此类任务编写了库。
KeyboardJS.on('up', function() { console.log('up'); });
KeyboardJS.on('down', function() { console.log('down'); });
KeyboardJS.on('left', function() { console.log('right'); });
KeyboardJS.on('right', function() { console.log('left'); });
使用纯Javascript的简洁解决方案(感谢Sygmoral提出的改进建议):
document.onkeydown = function(e) {
switch (e.keyCode) {
case 37:
alert('left');
break;
case 39:
alert('right');
break;
}
};
document.addEventListener('keydown', myFunction);
您确定jQuery.HotKeys不支持箭头键吗?当我在IE7,Firefox 3.5.2和Google Chrome 2.0.172中对其进行测试时,我已经弄乱了他们的演示,并观察到左右,上下的工作情况。
编辑:看来jquery.hotkeys已重定位到Github:https : //github.com/jeresig/jquery.hotkeys
向右或向左移动的纯js示例
window.addEventListener('keydown', function (e) {
// go to the right
if (e.keyCode == 39) {
}
// go to the left
if (e.keyCode == 37) {
}
});
您可以使用jQuery绑定:
$(window).bind('keydown', function(e){
if (e.keyCode == 37) {
console.log('left');
} else if (e.keyCode == 38) {
console.log('up');
} else if (e.keyCode == 39) {
console.log('right');
} else if (e.keyCode == 40) {
console.log('down');
}
});
一个强大的Javascript库,用于捕获键盘输入和输入的按键组合。它没有依赖性。
http://jaywcjlove.github.io/hotkeys/
hotkeys('right,left,up,down', function(e, handler){
switch(handler.key){
case "right":console.log('right');break
case "left":console.log('left');break
case "up":console.log('up');break
case "down":console.log('down');break
}
});
我来这里是在寻找一种简单的方法,让用户在专注于输入时,可以使用箭头键+1或-1数字输入。我从来没有找到一个好的答案,但是使以下代码看起来很不错-现在在整个站点范围内。
$("input").bind('keydown', function (e) {
if(e.keyCode == 40 && $.isNumeric($(this).val()) ) {
$(this).val(parseFloat($(this).val())-1.0);
} else if(e.keyCode == 38 && $.isNumeric($(this).val()) ) {
$(this).val(parseFloat($(this).val())+1.0);
}
});