javascript 如何在 Chrome 和 IE 中跟踪箭头键？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6226859/
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
how can i track arrow keys in Chrome and IE?
提问by developer
Im using foloowing code to track key events
我使用以下代码来跟踪关键事件
oEvent=window.event || oEvent;
iKeyCode=oEvent.keyCode || oEvent.which;alert(iKeyCode);
its giving me alerts in firefox but not in IE and chrome. Its giving me all the other keyborad characters but not esc key and arrow keys.
它在 Firefox 中给我警报，但在 IE 和 chrome 中没有。它给了我所有其他键盘字符，但没有 esc 键和箭头键。
How can i detect esc key and arrow keys in chrome and IE using javascript??
如何使用javascript检测chrome和IE中的esc键和箭头键？
回答by Gaurav
You don't really need JQuery, though it does make your code shorter.
您并不真正需要 JQuery，尽管它确实使您的代码更短。
You will have to use the keyDown event, keyPress will not work in old versions of IE for the arrow keys.
您将不得不使用 keyDown 事件，keyPress 在旧版本的 IE 中将无法用于箭头键。
There is a full tutorial here that you can use, see the example with arrow keys close to the bottom of the page: http://www.cryer.co.uk/resources/javascript/script20_respond_to_keypress.htm
您可以在此处使用完整的教程，请参阅页面底部附近带有箭头键的示例：http: //www.cryer.co.uk/resources/javascript/script20_respond_to_keypress.htm
Here's some code I used, a bit simplified since I had to handle repeated keypresses with buffering:
这是我使用的一些代码，由于我不得不使用缓冲处理重复的按键操作，因此稍微简化了一些：
document.onkeydown = function(event) {
if (!event)
event = window.event;
var code = event.keyCode;
if (event.charCode && code == 0)
code = event.charCode;
switch(code) {
case 37:
// Key left.
break;
case 38:
// Key up.
break;
case 39:
// Key right.
break;
case 40:
// Key down.
break;
}
event.preventDefault();
};
回答by Piotr Salaciak
I've just faced same problem. There is at least one difference Chrome handles the keypressand keydown/keyupevents. keypressevent in Chrome is not fired for arrow keys, whereas for keydownand keyupit is.
我刚刚面临同样的问题。Chrome 处理keypress和keydown/keyup事件至少有一个区别。keypressChrome 中的事件不会为箭头键触发，而 forkeydown和keyup它是。
回答by Overflow289
problem:webkit sends a keycode 38 (up arrow) to keypress when you do shift-7 (ampersand).
问题：当您执行 shift-7（与号）时，webkit 会向按键发送键码 38（向上箭头）。
summary:& and up both equal 38. % and left both equal 37. ' and right both equal 39. ( and down both equal 40. for firefox and opera, the 37/38/39/40 aren't sent for &, %, ', (. they only send those for up, down, left, right. but webkit and ie send 37/38/39/40 for both arrow keys and &, %, ', (. note that for up/down/left/right, webkit sets charCode to 0, but not for &, %, ', (.
总结：& 和 up 都等于 38. % 和 left 都等于 37. ' 和 right 都等于 39. ( and down 都等于 40. 对于firefox和opera，37/38/39/40不发送给&， %, ', (. 他们只发送向上、向下、向左、向右的那些。但是 webkit 和即发送 37/38/39/40 用于两个箭头键和 &, %, ', (. 注意向上/向下/left/right，webkit 将 charCode 设置为 0，但不适用于 &, %, ', (.
solution:so if you handling those events by keycode, you need to either ignore when the shift key is down or check if the charCode is 0
解决方案：因此，如果您通过键码处理这些事件，则需要在按下 shift 键时忽略或检查 charCode 是否为 0
- Best Resource: http://unixpapa.com/js/key.html
- Test a browser: http://asquare.net/javascript/tests/KeyCode.html
- bugs.jquery.com/ticket/7300. "This is done to match IE. keypress events are only supposed to fire for keys that insert characters. Note that keydown/keyup do fire for arrow keys."
- Interesting project: github.com/OscarGodson/jKey
- 最佳资源：http: //unixpapa.com/js/key.html
- 测试浏览器：http: //asquare.net/javascript/tests/KeyCode.html
- bugs.jquery.com/ticket/7300。“这样做是为了匹配 IE。按键事件只应该为插入字符的键触发。请注意，keydown/keyup 确实为箭头键触发。”
- 有趣的项目：github.com/OscarGodson/jKey
回答by Matthew Riches
Use jQuery and use something like this:
使用 jQuery 并使用以下内容：
$(document).keydown(function(e){
if (e.keyCode == 37) {
alert( "left pressed" );
return false;
}
});
Character codes:
字符代码：
37: left
37：左
38: up
38：向上
39: right
39：对
40: down
40：下来
回答by jnoreiga
Try using the jquery library to do what you need and then call below. In the demo you can click in the input box and then start typing. It will alert you with the key code. You can bind that event listener to any element of your page. It doesn't have to just be an input.
尝试使用 jquery 库来做你需要的，然后在下面调用。在演示中，您可以单击输入框，然后开始输入。它会用关键代码提醒您。您可以将该事件侦听器绑定到页面的任何元素。它不一定只是一个输入。
$(document).ready(function() {
KEY_CODES = {
37: 'left',
38: 'up',
39: 'right',
40: 'down'
}
KEY_STATUS = { keyDown:false };
for (code in KEY_CODES) {
KEY_STATUS[KEY_CODES[code]] = false;
}
$(window).keydown(function (e) {
KEY_STATUS.keyDown = true;
// perform functionality for keydown
if (KEY_CODES[e.keyCode]) {
e.preventDefault();
alert('arrow');
if(e.keyCode == 40)
{
// Arrow Down
}
else if(e.keyCode == 39)
{
// Arrow Right
}
else if(e.keyCode == 38)
{
// Arrow Up
}
else if(e.keyCode == 37)
{
// Arrow Left
}
}
}).keyup(function (e) {
KEY_STATUS.keyDown = false;
if (KEY_CODES[e.keyCode]) {
e.preventDefault();
KEY_STATUS[KEY_CODES[e.keyCode]] = false;
}
});
});
回答by 1''
Here is a terse formulation:
这是一个简洁的公式：
document.onkeydown = function(e) {
switch (e.keyCode) {
case 37:
alert('left');
break;
case 38:
alert('up');
break;
case 39:
alert('right');
break;
case 40:
alert('down');
break;
}
};
However, if you are using JQuery, you are better off using e.which, which JQuery "normalizes" to account for cross-browser differences:
但是，如果您使用的是 JQuery，则最好使用e.which，JQuery 将其“标准化”以解决跨浏览器差异：
$(document).keydown(function(e) {
switch(e.which) {
// the rest is the same
回答by Nick Grealy
This worked for me in Opera20 and IE8. (I don't have Chrome to test with.)
这在 Opera20 和 IE8 中对我有用。（我没有 Chrome 可以测试。）
var keyPressListenerFn = function(event) {
if (!event){ event = window.event }
var code = event.charCode && event.keyCode == 0 ? event.charCode : event.keyCode
switch(code) {
case 37: prev(); break // left
case 39: next(); break // right
}
if (event.preventDefault){ event.preventDefault() } // opera20
if (event.returnValue){ event.returnValue = false } // ie8
}
var addEvent = document.attachEvent ? document.attachEvent : document.addEventListener
addEvent('keydown', keyPressListenerFn) // opera20
addEvent('onkeydown', keyPressListenerFn) // ie8
