JavaScript 鍵盤事件 keyCode 對照表與現代化最佳實踐 (KeyboardEvent.key)

經典 keyCode 對照表 (僅供維護舊代碼參考)

⚠️ keyCode 已棄用：現代標準屬性

現代最佳實踐代碼範例

<input id="search" placeholder="按 Enter 搜尋" />

<script>
document.getElementById("search").addEventListener("keydown", function(e) {
    // 1. 使用 event.key 判斷 Enter
    if (e.key === "Enter") {
        e.preventDefault(); // 防止表單提交等默認行為
        doSearch(this.value);
    }

    // 2. 組合鍵判斷：event.ctrlKey / shiftKey / altKey / metaKey
    if (e.key === "s" && (e.ctrlKey || e.metaKey)) { // Ctrl+S / Cmd+S
        e.preventDefault();
        saveDraft();
    }

    // 3. 物理鍵位判斷 (遊戲/快捷鍵綁定)
    if (e.code === "Space") { jump(); } // 無論鍵盤佈局
});
</script>

特殊鍵 `event.key` 值速查

// 功能鍵
"Enter", "Tab", "Escape", "Backspace", "Delete", "Insert"
"ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"
"Home", "End", "PageUp", "PageDown"
"CapsLock", "NumLock", "ScrollLock"
"F1" - "F12"
"PrintScreen", "Pause", "ContextMenu"

// 修飾鍵 (單獨按下時)
"Shift", "Control", "Alt", "Meta" (Win/Command)
"ShiftLeft", "ControlRight" 等 (event.code 區分左右)

// 空白鍵
" " (空字符串)  // 注意：event.key === " " 而非 "Spacebar"

跨瀏覽器兼容策略 (漸進增強)

function getKey(event) {
    // 標準優先
    if (event.key) return event.key;

    // 兼容舊瀏覽器 (IE ≤ 10)
    var keyMap = {
        8: "Backspace", 9: "Tab", 13: "Enter", 16: "Shift", 17: "Control",
        18: "Alt", 27: "Escape", 32: " ", 37: "ArrowLeft", 38: "ArrowUp",
        39: "ArrowRight", 40: "ArrowDown", 46: "Delete"
    };
    return keyMap[event.keyCode] || String.fromCharCode(event.keyCode);
}

// 使用
element.addEventListener("keydown", function(e) {
    var key = getKey(e);
    if (key === "Enter") { ... }
});

常見誤區避雷

• `keypress` 事件已棄用**：改用 `keydown` (所有鍵) 或 `beforeinput` (文字輸入)。
• 大小寫判斷**：`e.key === "a"` 只匹配小寫；大寫為 `"A"`。組合鍵用 `e.shiftKey` 輔助判斷。
• 中文輸入法**：`keydown` 觸發時 `e.key` 可能為 `"Process"` 或 `"Unidentified"`，實際文字在 `compositionend` / `input` 事件獲取。
• 無障礙**：自定義快捷鍵需提供修改/關閉選項，避免與螢幕閱讀器、瀏覽器內建快捷鍵衝突。