数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究在 JavaScript 中检测方向键按下？
在本文中，我们将学习如何在 JavaScript 中检测方向键按下。在深入文章之前，让我们先讨论一些需要了解的信息。
键盘上的每个键都有一个独特的键码。在这里，我们将检查方向键是否被按下。我们的键盘上有四个方向键。在我们的键盘上，我们可以看到左、右、上和下键。这些键也有一个特殊的键码，JavaScript 可以利用它来确定它们是否被按下。
左方向键、上方向键、右方向键和下方向键的键码分别为 37、38、39 和 40。
让我们深入了解文章，以更深入地了解如何在 JavaScript 中检测方向键按下。
JavaScript 中的 Keydown 事件监听器
当按下某个键时，.onkeydown 事件处理程序会指示编译器执行特定函数()；通过放置一个 alert("消息")，我们可以显示一个包含特定消息的警告框。
示例
在下面的示例中，我们使用.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>
当脚本执行时，它将生成一个包含文本和网页提示的输出。如果用户点击输出窗口并按下方向键，则事件会被触发并显示有关用户按下的方向键的警报。
更新于： 2023年1月18日
19K+ 次查看
广告