如何在 JavaScript 中偵測箭頭鍵按下：為什麼 onkeypress 不起作用以及 onkeydown 解決方案

在 JavaScript 中偵測箭頭鍵按下：綜合指南

偵測按鍵是 Web 開發中的常見任務，尤其是在建立互動式控制項時。雖然可以使用 onkeypress 事件偵聽器準確地偵測到大多數按鍵，但箭頭鍵提出了獨特的挑戰。本文探討了為什麼使用 onkeypress 無法偵測到箭頭鍵，並提供了一個在 JavaScript 中擷取箭頭鍵按下的簡單解決方案。

箭頭鍵困境

當使用 onkeypress 偵測按鍵時，它有效大多數按鍵都完美無缺。但是，箭頭鍵（左、上、右、下）不會觸發 onkeypress 事件。這是因為瀏覽器對箭頭鍵的處理方式不同，預設啟動滾動行為。

解決方案：使用 onkeydown

要偵測箭頭鍵按下，必須使用 onkeydown 事件監聽器而不是 onkeypress。只要按下某個按鍵（包括箭頭鍵），就會觸發 onkeydown 事件。以下是使用onkeydown 的程式碼片段的更新版本：

function checkKey(e) {
    var event = window.event ? window.event : e;
    console.log(event.keyCode);
}

箭頭鍵程式碼

要識別特定箭頭鍵，您可以使用其對應的鍵碼：

• 左：37
• 上： 38
• 右：39
• 下：40

透過將 event.keyCode 與這些值進行比較，您可以輕鬆地確定按下了哪個箭頭鍵。

以上是如何在 JavaScript 中偵測箭頭鍵按下：為什麼 onkeypress 不起作用以及 onkeydown 解決方案的詳細內容。更多資訊請關注PHP中文網其他相關文章！