如何<
在 Javascript 函数中处理箭头键和(大于)?哪个事件和哪个代码(charCode 或 keyCode)?
我很困惑如何做到这一点。我已经非常仔细地阅读了这个链接, Events 和 keyCode+charCode,但我找不到适合我的场景的任何解决方案。
如何<
在 Javascript 函数中处理箭头键和(大于)?哪个事件和哪个代码(charCode 或 keyCode)?
我很困惑如何做到这一点。我已经非常仔细地阅读了这个链接, Events 和 keyCode+charCode,但我找不到适合我的场景的任何解决方案。
使用event.keyCode
就足够了。您只需要考虑获取关键事件方面的浏览器兼容性问题。
这是一个捕获箭头键的基本启动示例,复制'n'粘贴'n'运行它:
<!DOCTYPE html>
<html lang="en">
<head>
<title>SO question 3181648</title>
<script>
document.onkeydown = function(e) {
e = e || event; // "real browsers" || IE6/7.
switch (e.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>
要捕获按下的字符<
,请查看Tim 的答案。
当检测到非文本输入键(如箭头键)时,使用keydown
事件是正确的方法。对于检测键入的字符,例如<
,使用keypress
事件是唯一安全的方法。如果您改为使用keydown
事件及其keyCode
属性,则不能保证这适用于与您自己不同的键盘和浏览器类型。
如果你真的想了解 JavaScript 密钥处理,我推荐以下页面:http ://unixpapa.com/js/key.html
这是您的要求的示例:
document.onkeydown = function(evt) {
evt = evt || window.event;
switch (evt.keyCode) {
case 37: alert("left"); break;
case 38: alert("up"); break;
case 39: alert("right"); break;
case 40: alert("down"); break;
}
};
document.onkeypress = function(evt) {
evt = evt || window.event;
var charCode = evt.which || evt.keyCode;
var charStr = String.fromCharCode(charCode);
if (charStr == "<") {
alert("<");
}
};
<script type="text/javascript">
var Keys = {
BACKSPACE: 8, TAB: 9, ENTER: 13, SHIFT: 16,
CTRL: 17, ALT: 18, PAUSE: 19, CAPS: 20,
ESC: 27, PAGEUP: 33, PAGEDN: 34, END: 35,
HOME: 36, LEFT: 37, UP: 38, RIGHT: 39,
DOWN: 40, INSERT: 45, DELETE: 46,
n0: 48, n1: 49, n2: 50, n3: 51, n4: 52,
n5: 53, n6: 54, n7: 55, n8: 56, n9: 57,
A:65, B:66, C:67, D:68, E:68, F:70, G:71, H:72, I:73, J:74, K:75,
L:76, M:77, N:78, O:79, P:80, Q:81, R:82, S:83, T:84, U:85, V:86,
W:87, X:88, Y:89, Z:90,
WINLEFT: 91, WINRIGHT: 92, SELECT: 93, NUM0: 96,
NUM1: 97, NUM2: 98, NUM3: 99, NUM4: 100,
NUM5: 101, NUM6: 102, NUM7: 103, NUM8: 104,
NUM9: 105, MULTIPLY: 106, ADD: 107, SUBTRACT: 109,
DECIMAL: 110, DIVIDE: 111, F1: 112, F2: 113,
F3: 114, F4: 115, F5: 116, F6: 117,
F7: 118, F8: 119, F9: 120, F10: 121,
F11: 122, F12: 123, NUMLOCK: 144, SCROLLLOCK: 145,
SEMICOLON: 186,EQUAL: 187, COMMA: 188, DASH: 189,
PERIOD: 190, FORWARDSLASH: 191, GRAVEACCENT: 192,
OPENBRACKET: 219, BACKSLASH: 220,
CLOSEBRACKET: 221, QUOTE: 222
};
/* true - will be handled also by default handler and for false - will not (if you wanna disable some keys) */
function pressedKeyHandler(key){
if (k != Keys.COMMA || k != Keys.DASH) return true;
//handle pressed button here
return true;
}
if (typeof window.event != 'undefined') // IE
document.onkeydown = function() { return pressedKeyHandler(event.keyCode); }
else // FireFox/Opera/Others
document.onkeypress = function(e) { return pressedKeyHandler(e.keyCode); }
</script>
我可能是错的,但似乎 IE 更好地处理 onkeydown 事件而不是 onkeypress。