如何在 JavaScript 中檢測鍵盤輸入事件

網頁中的鍵盤輸入是使用鍵盤事件處理的。使用 addEventListener() 註冊監聽器，然後讀取傳遞給其回呼的事件物件。使用 keydown 在按下按鍵時回應，使用 keyup 在釋放按鍵後回應。

使用 addEventListener() 監聽鍵盤事件

將監聽器附加到應該接收輸入的元素。當頁面應該在焦點位於頁面任何位置時回應，請使用 document；當該行為屬於某個表單控制項時，則將其附加到該控制項。回呼會接收一個 KeyboardEvent 作為參數，因此請為該參數命名並讀取其屬性，而不是依賴全域的 event 值。

這個可執行的範例使用一個小型的 document 替代物，並提供一個按鍵事件，因此可以在 JavaScript 執行環境中嘗試其監聽器形式。在瀏覽器中，使用真實的 document 來接收鍵盤輸入。

const listeners = new Map();
const document = {
  addEventListener(type, callback) {
    listeners.set(type, callback);
  }
};

document.addEventListener("keydown", (event) => {
  console.log(`Key pressed: ${event.key}`);
});

listeners.get("keydown")({ key: "ArrowDown" });

真實的瀏覽器會在使用者按下按鍵時呼叫回呼。上面的替代物使用包含處理常式所使用的相同 key 值的物件來呼叫它；它不會模擬瀏覽器輸入或其他 KeyboardEvent 行為。

在 keydown 和 keyup 之間選擇

按下按鍵時會觸發 keydown 事件。它非常適合應該立即開始的動作，例如在按住按鍵時移動遊戲角色。釋放按鍵時會觸發 keyup 事件，適合應該在使用者結束按住按鍵後發生的動作。根據動作應該發生的時間選擇事件。按住按鍵可能會產生重複的 keydown 事件，因此當動作應該只發生一次時，請考慮到這一點。

讀取 KeyboardEvent.key 並處理特殊按鍵

使用 event.key 在處理常式中識別按鍵。它傳回可讀的值，例如 "a"、"Enter" 和 "ArrowDown"，使比較變得簡單。例如，方向鍵處理常式可以在將項目向下移動之前檢查 event.key === "ArrowDown"。修飾鍵狀態也可從事件中獲得，透過 event.shiftKey 和 event.ctrlKey 等屬性。

event.key 的值反映了按鍵在目前鍵盤配置和修飾鍵下的含義。當行為應該遵循實體按鍵位置時，例如在不同配置下保持在同一位置的遊戲控制，請使用 event.code。對於普通命令和命名按鍵，event.key 通常是更清晰的選擇。

在需要時防止按鍵的預設動作

鍵盤事件處理常式可以呼叫 event.preventDefault() 來抑制與該按鍵相關聯的瀏覽器動作，例如將方向鍵用於自訂介面時的捲動。僅當頁面承擔該動作的責任時才呼叫它，並且當行為依賴於可取消性時檢查 event.cancelable。它不會阻止事件到達其他監聽器；僅當這也是預期行為時才使用傳播方法。普通的按鍵檢測不需要取消。

為什麼通常應避免使用 keypress

避免在新的鍵盤處理中使用 keypress。它已被棄用，並且不能一致地涵蓋所有按鍵。使用 keydown 或 keyup 觀察鍵盤動作，使用 event.key 讀取按鍵值。對於目前的程式碼，不要依賴 event.char 或舊有的 keyCode 屬性；使用描述按鍵及其狀態的標準事件屬性。