通过 javascript/jQuery 检测 IE 中的箭头键按下
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2217553/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Detecting Arrow key press in IE via javascript/jQuery
提问by DA.
I'm trying to set up a menu that can be navigated via the arrow keys. I have this working fin in Firefox.
我正在尝试设置一个可以通过箭头键导航的菜单。我在 Firefox 中有这个工作鳍。
Trying to get it to work in IE8 and after a bit of struggle, found that it was because IE8 wouldn't register a keypress on the arrows. To test:
试图让它在 IE8 中工作，经过一番挣扎，发现这是因为 IE8 不会在箭头上注册按键。去测试：
$(document).keypress(function (eh){
alert(eh.keyCode);
};
In Firefox, pressing any of the arrow keys would trigger an alert of 37, 38, 39 or 40.
在 Firefox 中，按任何箭头键都会触发 37、38、39 或 40 的警报。
In IE8, nothing. Any other key on the standard QWERTY keyboard would register, but not the arrow keys.
在 IE8 中，什么都没有。标准 QWERTY 键盘上的任何其他键都会注册，但不会注册箭头键。
Is this an issue with my Javascript? A browser setting? A Windows setting?
这是我的 Javascript 的问题吗？浏览器设置？Windows 设置？
回答by BalusC
From the jQuery keypressdocumentation(the last paragraph of the introductory text):
来自jQuerykeypress文档（介绍性文本的最后一段）：
Note that
keydownandkeyupprovide a code indicating which key is pressed, whilekeypressindicates which character was entered. For example, a lowercase "a" will be reported as 65 bykeydownandkeyup, but as 97 bykeypress. An uppercase "A" is reported as 97 by all events. Because of this distinction, when catching special keystrokes such as arrow keys,.keydown()or.keyup()is a better choice.
请注意，
keydown并keyup提供一个代码指示哪个键被按下，而keypress指示哪个字符被输入。例如，小写的“a”将被 和 报告为 65，keydown而被 报告keyup为 97keypress。所有事件都将大写“A”报告为 97。由于这种区别，在捕捉特殊击键（如箭头键）时，.keydown()还是.keyup()更好的选择。
It even literally mentions about the arrow keys ;) Thus, you really need to hook on either the keydownor keyupevents. Here's an SSCCEwith keydown, just copy'n'paste'n'run it. No, you don't need to do a browser-compatible check on the event, this works in all browsers from IE6 up to with Firefox.
它甚至从字面上提到了箭头键 ;) 因此，您确实需要挂钩keydown或keyup事件。这是一个带有的SSCCEkeydown，只需复制'n'paste'n'run 即可。不，您不需要对 进行浏览器兼容检查event，这适用于从 IE6 到 Firefox 的所有浏览器。
<!doctype html>
<html lang="en">
<head>
<title>SO question 2217553</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).keydown(function(event) {
switch (event.keyCode) {
case 37: alert('left'); break;
case 38: alert('up'); break;
case 39: alert('right'); break;
case 40: alert('down'); break;
}
});
</script>
</head>
<body>
<p>Press one of the arrow keys.</p>
</body>
</html>
回答by Skilldrick
Try this:
尝试这个：
$(document).keydown(function (e) {
if(!e) {
e = window.event;
}
switch(e.keyCode) {
case 37:
goLeft();
break;
case 39:
goRight();
break;
}
});
回答by psychotik
Use the 'keydown' event
使用 'keydown' 事件
回答by Mark Schultheiss
Because I sometimes do not want events to bubble for some keys, I use something like: Customize the codes/keys as you see fit.
因为有时我不希望某些键的事件冒泡，所以我使用以下方法：根据您的需要自定义代码/键。
/* handle special key press */
function checkCptKey(e)
{
var shouldBubble = true;
switch (e.keyCode)
{
// user pressed the Tab
case 9:
{
$(".someSelect").toggleClass("classSelectVisible");
shouldBubble = false;
break;
};
// user pressed the Enter
case 13:
{
$(".someSelect").toggleClass("classSelectVisible");
break;
};
// user pressed the ESC
case 27:
{
$(".someSelect").toggleClass("classSelectVisible");
break;
};
};
/* this propogates the jQuery event if true */
return shouldBubble;
};
/* user pressed special keys while in Selector */
$(".mySelect").keydown(function(e)
{
return checkCptKey(e);
});
