Answers:
箭头键仅由触发onkeydown
,而不由触发onkeypress
。
关键代码为:
53
一个keydown
事件。你37
与之相处keypress
,这是另一回事
onkeyup
并停止该事件。实际上,您不应该使用Java脚本修改UI行为。
开关键向上和向下调用功能。每个键有不同的代码。
document.onkeydown = checkKey;
function checkKey(e) {
e = e || window.event;
if (e.keyCode == '38') {
// up arrow
}
else if (e.keyCode == '40') {
// down arrow
}
else if (e.keyCode == '37') {
// left arrow
}
else if (e.keyCode == '39') {
// right arrow
}
}
e = e ? e : window.event;
或:if (typeof(e) === "undefined") { e = window.event; }
keyCode === 32
,keyCode == '32'
或一样进行检查keyCode === '32'
。
更新,更清洁:使用 event.key
。没有更多的任意数字代码!如果您正在转译或知道您的用户都在现代浏览器上,请使用此功能!
node.addEventListener('keydown', function(event) {
const key = event.key; // "ArrowRight", "ArrowLeft", "ArrowUp", or "ArrowDown"
});
详细处理:
switch (event.key) {
case "ArrowLeft":
// Left pressed
break;
case "ArrowRight":
// Right pressed
break;
case "ArrowUp":
// Up pressed
break;
case "ArrowDown":
// Down pressed
break;
}
您可以轻松地将其扩展为检查 "w", "a", "s", "d"
,或其他任何键
PS 箭头event.code
相同
key
和keyCode
不赞成,已弃用。
可能是最恰当的表述:
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;
}
};
演示(感谢用户Angus Grant):http : //jsfiddle.net/angusgrant/E3tE6/
这应该跨浏览器工作。如果存在无法使用的浏览器,请发表评论。
还有其他获取键码的方法(例如,使用e.charCode和window.event代替e),但不必这样做。您可以在http://www.asquare.net/javascript/tests/KeyCode.html上尝试大多数方法。请注意,event.keycode不适用于Firefox中的onkeypress,但适用于onkeydown。
使用keydown
,不适keypress
用于不可打印的键,例如箭头键:
function checkKey(e) {
e = e || window.event;
alert(e.keyCode);
}
document.onkeydown = checkKey;
我发现的最佳JavaScript键事件参考(例如,摆脱quirksmode的困扰)在这里:http : //unixpapa.com/js/key.html
我相信最新的方法是:
document.addEventListener("keydown", function(event) {
event.preventDefault();
const key = event.key; // "ArrowRight", "ArrowLeft", "ArrowUp", or "ArrowDown"
switch (key) { // change to event.key to key to use the above variable
case "ArrowLeft":
// Left pressed
<do something>
break;
case "ArrowRight":
// Right pressed
<do something>
break;
case "ArrowUp":
// Up pressed
<do something>
break;
case "ArrowDown":
// Down pressed
<do something>
break;
}
});
假设开发人员希望代码在页面上的任何地方都处于活动状态,并且客户端应忽略任何其他按键。消除event.preventDefault(); 如果按键(包括此处理程序捕获的按键)仍应处于活动状态,则返回行。
这是一个示例实现:
var targetElement = $0 || document.body;
function getArrowKeyDirection (keyCode) {
return {
37: 'left',
39: 'right',
38: 'up',
40: 'down'
}[keyCode];
}
function isArrowKey (keyCode) {
return !!getArrowKeyDirection(keyCode);
}
targetElement.addEventListener('keydown', function (event) {
var direction,
keyCode = event.keyCode;
if (isArrowKey(keyCode)) {
direction = getArrowKeyDirection(keyCode);
console.log(direction);
}
});
var targetElement = typeof $0 !== 'undefined' ? $0 : document.body;
或仅仅var targetElement = document.body;
是:可以
这是我的操作方式:
var leftKey = 37, upKey = 38, rightKey = 39, downKey = 40;
var keystate;
document.addEventListener("keydown", function (e) {
keystate[e.keyCode] = true;
});
document.addEventListener("keyup", function (e) {
delete keystate[e.keyCode];
});
if (keystate[leftKey]) {
//code to be executed when left arrow key is pushed.
}
if (keystate[upKey]) {
//code to be executed when up arrow key is pushed.
}
if (keystate[rightKey]) {
//code to be executed when right arrow key is pushed.
}
if (keystate[downKey]) {
//code to be executed when down arrow key is pushed.
}
我已经能够用jQuery捕获它们:
$(document).keypress(function (eventObject) {
alert(eventObject.keyCode);
});
keypress
将无法使用箭头键。您必须$(document).on('keydown', function() {...})
改用
那是chrome和firefox的工作代码
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
function leftArrowPressed() {
alert("leftArrowPressed" );
window.location = prevUrl
}
function rightArrowPressed() {
alert("rightArrowPressed" );
window.location = nextUrl
}
function topArrowPressed() {
alert("topArrowPressed" );
window.location = prevUrl
}
function downArrowPressed() {
alert("downArrowPressed" );
window.location = nextUrl
}
document.onkeydown = function(evt) {
var nextPage = $("#next_page_link")
var prevPage = $("#previous_page_link")
nextUrl = nextPage.attr("href")
prevUrl = prevPage.attr("href")
evt = evt || window.event;
switch (evt.keyCode) {
case 37:
leftArrowPressed(nextUrl);
break;
case 38:
topArrowPressed(nextUrl);
break;
case 39:
rightArrowPressed(prevUrl);
break;
case 40:
downArrowPressed(prevUrl);
break;
}
};
</script>
</head>
<body>
<p>
<a id="previous_page_link" href="http://www.latest-tutorial.com">Latest Tutorials</a>
<a id="next_page_link" href="http://www.zeeshanakhter.com">Zeeshan Akhter</a>
</p>
</body>
</html>
我也一直在寻找这个答案,直到我看到这篇文章。
我发现了另一个解决方案,可以根据我的问题来了解不同键的键码。我只是想分享我的解决方案。
只需使用keyup / keydown事件将值写入控制台/使用相同的提示即可event.keyCode
。喜欢-
console.log(event.keyCode)
// or
alert(event.keyCode)
-卢比
那更短。
function IsArrows (e) {
return (e.keyCode >= 37 && e.keyCode <= 40);
}
if ([37,38,39,40].indexOf(e.keyCode)!=-1){ console.log('arrow pressed') }
这个图书馆动摇了! https://craig.is/killing/mice
Mousetrap.bind('up up down down left right left right b a enter', function() {
highlight([21, 22, 23]);
});
但是,您需要快速按一下顺序以突出显示该页面中的代码。
如果您使用jquery,那么您也可以这样做,
$(document).on("keydown", '.class_name', function (event) {
if (event.keyCode == 37) {
console.log('left arrow pressed');
}
if (event.keyCode == 38) {
console.log('up arrow pressed');
}
if (event.keyCode == 39) {
console.log('right arrow pressed');
}
if (event.keyCode == 40) {
console.log('down arrow pressed');
}
});
箭头键触发KEYUP
$(document).on("keyup", "body", function(e) {
if (e.keyCode == 38) {
// up arrow
console.log("up arrow")
}
if (e.keyCode == 40) {
// down arrow
console.log("down arrow")
}
if (e.keyCode == 37) {
// left arrow
console.log("lefy arrow")
}
if (e.keyCode == 39) {
// right arrow
console.log("right arrow")
}
})
onkeydown允许ctrl,alt,拉屎
onkeyup允许制表符,向上箭头,向下箭头,向左箭头,向下箭头
带钥匙和ES6。
这为每个箭头键提供了单独的功能,而无需使用开关,并且在打开时也可以与数字键盘中的2,4,6,8键一起NumLock
使用。
const element = document.querySelector("textarea"),
ArrowRight = k => {
console.log(k);
},
ArrowLeft = k => {
console.log(k);
},
ArrowUp = k => {
console.log(k);
},
ArrowDown = k => {
console.log(k);
},
handler = {
ArrowRight,
ArrowLeft,
ArrowUp,
ArrowDown
};
element.addEventListener("keydown", e => {
const k = e.key;
if (handler.hasOwnProperty(k)) {
handler[k](k);
}
});
<p>Click the textarea then try the arrows</p>
<textarea></textarea>
keypress
箭头键事件,但您是正确的,它keydown
始终适用于箭头键。