一、前言
在网页开发中，用户交互 是非常重要的一环。除了鼠标操作之外，键盘事件也是前端开发中最常见的交互方式之一。
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 事件 | 实时获取输入内容变化 | ✅ 配合使用 |
七、结语
感谢您的阅读！如果你有任何问题或想法，请在评论区留言交流！
