資料結構
網路
關係型資料庫管理系統
作業系統
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+ 次檢視
廣告