一、前言
在網頁開發中，用戶交互 是非常重要的一環。除了鼠標操作之外，鍵盤事件也是前端開發中最常見的交互方式之一。
JavaScript 提供了多個用于監聽和處理鍵盤輸入的事件，例如 keydown、keyup 和 keypress。掌握這些事件可以幫助我們實現更豐富的用戶交互體驗，比如：
- 監聽用戶按下回車鍵提交表單；
- 實現快捷鍵功能（如 Ctrl + S 保存）；
- 輸入框限制只能輸入數字或字母；
- 游戲中的鍵盤控制邏輯；
本文將詳細介紹 JavaScript 中常用的鍵盤事件，并結合實際案例幫助你快速上手！
二、JavaScript 中的鍵盤事件類型
| 事件類型 | 觸發時機 | 是否支持字符鍵 |
|---|---|---|
keydown | 按下任意鍵時觸發 | ? 支持所有按鍵 |
keyup | 松開按鍵時觸發 | ? 支持所有按鍵 |
keypress（已棄用） | 按下字符鍵并產生字符輸入時觸發 | ? 不支持功能鍵（如 Shift、Ctrl 等） |
📌 注意：keypress 事件在現代瀏覽器中已被 棄用（deprecated），建議統一使用 keydown 或 keyup。
三、事件對象（Event Object）
當鍵盤事件被觸發時，會傳入一個 事件對象（event），它包含了與該次按鍵相關的詳細信息，常用的屬性如下：
| 屬性名 | 含義 |
|---|---|
key | 返回按下的鍵值（字符串），如?'a',?'Enter',?'Shift' |
keyCode（已棄用） | 返回按鍵的 ASCII 編碼（整數） |
code | 返回物理按鍵的標識符（如?'KeyA',?'Enter'） |
ctrlKey?/?shiftKey?/?altKey | 判斷是否同時按下了 Ctrl/Shift/Alt 鍵 |
四、常用鍵盤事件示例
? 示例1：監聽 Enter 鍵提交表單
<input type="text" id="searchInput" placeholder="輸入內容后按回車搜索"><script>
document.getElementById("searchInput").addEventListener("keydown", function(event) {if (event.key === "Enter") {alert("你按下了回車鍵，正在搜索：" + event.target.value);}
});
</script>📌 應用場景：常用于搜索框、登錄框等自動提交場景。
? 示例2：監聽 Ctrl + S 快捷鍵保存內容
document.addEventListener("keydown", function(event) {if (event.ctrlKey && event.key === "s") {event.preventDefault(); // 阻止默認保存行為（如彈出保存頁面）alert("你按下了 Ctrl + S，正在保存數據...");}
});📌 技巧說明：
- 使用?
event.ctrlKey?判斷是否按住 Ctrl； - 使用?
event.preventDefault()?可阻止瀏覽器默認行為。
? 示例3：限制輸入框只允許輸入數字
<input type="text" id="numberInput" placeholder="請輸入數字"><script>
document.getElementById("numberInput").addEventListener("keydown", function(event) {const allowedKeys = ['Backspace', 'Tab', 'ArrowLeft', 'ArrowRight', 'Delete'];// 允許刪除鍵、方向鍵、Tab 等基礎操作if (allowedKeys.includes(event.key)) return;// 判斷是否為數字鍵if (!/^[0-9]$/.test(event.key)) {event.preventDefault();}
});
</script>📌 這個方法可以有效防止用戶輸入非法字符，提升用戶體驗。
? 示例4：實現方向鍵控制游戲角色移動
document.addEventListener("keydown", function(event) {switch(event.key) {case "ArrowUp":console.log("向上移動");break;case "ArrowDown":console.log("向下移動");break;case "ArrowLeft":console.log("向左移動");break;case "ArrowRight":console.log("向右移動");break;}
});📌 應用場景：適用于小游戲、畫布動畫、地圖導航等功能。
五、常見問題與注意事項
| 問題 | 解答 |
|---|---|
| 如何區分大小寫？ | event.key?會根據是否按住 Shift 返回大寫或小寫 |
| 如何判斷組合鍵？ | 使用?event.ctrlKey、event.shiftKey、event.altKey |
keyCode?和?key?的區別？ | keyCode?是數字編碼，不推薦使用；key?是可讀性更強的字符串 |
| 如何阻止默認行為？ | 使用?event.preventDefault() |
keypress?被棄用了怎么辦？ | 統一使用?keydown?或?keyup?替代 |
六、總結對比表
| 事件類型 | 適用場景 | 是否推薦使用 |
|---|---|---|
keydown | 檢測按鍵按下、組合鍵、方向鍵 | ? 推薦 |
keyup | 按鍵釋放后執行操作 | ? 推薦 |
keypress | 字符輸入檢測 | ? 已棄用 |
input?事件 | 實時獲取輸入內容變化 | ? 配合使用 |
七、結語
感謝您的閱讀！如果你有任何問題或想法，請在評論區留言交流！
