$(document).keydown(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)
});
$(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();
});
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
}
});
$(document).on 'keydown', (e) ->
switch e.which
when 37 then console.log('left key')
when 38 then console.log('up key')
when 39 then console.log('right key')
when 40 then console.log('down key')
e.preventDefault()
16 回答
您可以使用
e.preventDefault();
而不是像上面的示例中那样使用return false;
,它可以使用e.preventDefault();
,但更容易理解和阅读 .向右或向左的纯js的示例
你可以使用jQuery bind:
您可以通过以下方式检查
arrow key
是否被按下:防止箭头仅适用于任何其他对象SELECT,实际上我没有测试另一个对象LOL . 但它可以停止页面上的箭头事件和输入类型 .
我已经尝试左右阻止箭头在“kepress”“keydown”和“keyup”事件中使用“e.preventDefault()”或“return false”更改SELECT对象的值,但它仍然会更改对象值 . 但事件仍然告诉你箭头被按下了 .
在相应的
case
和break
行之间放置箭头键的自定义代码 .e.which由jQuery规范化,因此它适用于所有浏览器 . 对于纯JavaScript方法,请将前两行替换为:
(编辑2017)
如果你觉得很花哨,你现在可以使用e.key而不是
e.which
或e.keyCode
.e.key
正在成为推荐的标准,允许您检查字符串:'ArrowLeft'
,'ArrowUp'
,'ArrowRight'
,'ArrowDown'
. 新浏览器原生支持它,check here .字符代码:
你可以使用箭头键的keyCode(左,上,右和下37,38,39和40):
检查上面的示例here .
这有点晚了,但HotKeys有一个非常严重的错误,如果你将一个以上的热键附加到一个元素,会导致事件被多次执行 . 只需使用普通的jQuery .
我只是将其他答案的最佳位组合在一起:
您可以使用KeyboardJS . 我为这些任务编写了库 .
在这里查看图书馆=> http://robertwhurst.github.com/KeyboardJS/
使用普通Javascript的简洁解决方案(感谢Sygmoral的建议改进):
另见https://stackoverflow.com/a/17929007/1397061 .
你确定jQuery.HotKeys不支持箭头键吗?我之前用他们的演示搞砸了,当我在IE7,Firefox 3.5.2和谷歌Chrome 2.0.172中测试它时,观察左,右,上,下工作......
EDIT :看来jquery.hotkeys已重新定位到Github:https://github.com/jeresig/jquery.hotkeys
一个强大的Javascript库,用于捕获输入的键盘输入和键组合 . 它没有依赖关系 .
http://jaywcjlove.github.io/hotkeys/
我来到这里寻找一种简单的方法让用户在专注于输入时,使用箭头键1或-1数字输入 . 我从来没有找到一个好的答案,但制作了以下似乎很有效的代码 - 现在在网站上制作 .
咖啡和Jquery