在 JavaScript 中检测箭头键按下?
javascriptweb developmentfront end technology
在本文中，我们将学习如何在 JavaScript 中检测箭头键按下。在开始本文之前，让我们先讨论一些事情以了解一些信息。
键盘上的每个键都有一个不同的键代码。在这里，我们将检查箭头键是否被按下。我们的键盘上有四个箭头键。在我们的键盘上，我们可以看到左、右、上和下键。这些键还有一个特殊的键代码，JavaScript 可利用该键代码确定它们是否被按下。
左箭头键、上箭头键、右箭头键和下箭头键的键代码分别为 37、38、39 和 40。
让我们阅读本文，以了解有关在 JavaScript 中检测箭头键按下的更多信息。
JavaScript 中的 Keydown 事件监听器
当按下某个键时，.onkeydown 事件 处理程序会指示编译器执行特定 function()；通过放置 alert("message")，我们可以显示包含特定消息的警告框。
示例
在下面的示例中，我们通过传递箭头键唯一代码，使用 .onkeydown JavaScript 事件处理程序运行脚本。
<!DOCTYPE html>
<html>
<body style="text-align:center;">
<h1> JavaScript Detecting arrow key presses.</h1>
<p>click on the output page and then press the arrow key to get event triggered</p>
<script>
document.onkeydown = function(event) {
switch (event.keyCode) {
case 37:
alert('Left key');
break;
case 38:
alert('Up key');
break;
case 39:
alert('Right key');
break;
case 40:
alert('Down key');
break;
}
};
</script>
</body>
</html>
脚本执行时，每当用户按下箭头键时，它都会触发事件并显示警告框。例如，如果用户单击向下箭头键，则触发事件并显示警告"向下键"。
示例
让我们考虑另一个示例来检测按下的箭头键。在这种情况下，如果我们需要观察输出，我们需要打开控制台。
<!DOCTYPE html>
<html>
<body>
<textarea>Click then try the arrows</textarea>
<script>
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);
}
});
</script>
</body>
</html>
运行上述脚本时，输出窗口将弹出，显示一个包含文本的文本区域。当用户单击文本区域并按下箭头键时，将触发事件并在控制台中显示用户按下的键。
我们可以检查用户按下的键的图像。
示例
考虑以下示例，我们正在运行一个脚本来检测按下的箭头键。
<!DOCTYPE html>
<html>
<body>
<h1> JavaScript Detecting arrow key presses.</h1>
<p>click on the output page and then press the arrow key to get event triggered</p>
<script>
document.addEventListener("keydown", function(event) {
if (event.key == "ArrowLeft"){
alert("Left key");
} else if (event.key == "ArrowUp"){
alert("Up key");
} else if (event.key == "ArrowRight"){
alert("Right key");
} else if (event.key == "ArrowDown"){
alert("Down key");
}
});
</script>
</body>
</html>
脚本执行时，会在网页上生成由文本和提示组成的输出。如果用户点击输出窗口并按下箭头键，则会触发事件并显示有关用户按下箭头键的警报。
