我如何检测当一个方向键被按下?我用这个找到了答案:
function checkKey(e) {
var event = window.event ? window.event : e;
console.log(event.keyCode)
}
虽然它适用于所有其他键，但它不适用于方向键(可能是因为浏览器默认情况下应该在这些键上滚动)。
当前回答
与键和ES6。
这为您提供了一个单独的功能，每个方向键，而不使用开关，也适用于2,4,6,8键在NumLock是在numpad。
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>
其他回答
我也一直在寻找这个答案，直到我看到这篇文章。
我已经找到了另一个解决方案，知道不同的钥匙的键码，礼貌的我的问题。我只是想分享我的解决方案。
只需使用keyup/keydown事件在控制台/警报中写入值，使用event. keycode相同。像- - - - - -
console.log(event.keyCode)
// or
alert(event.keyCode)
——rupam
上下键调用函数。每个钥匙都有不同的密码。
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
}
}
我是这样做的:
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.
}
下面是一个示例实现:
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);
}
});
这是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>
