在前端开发中，检测键盘按键是实现用户交互的常见需求，比如为页面添加快捷键、控制游戏角色移动、限制输入框输入内容等场景都需要用到相关能力。js提供了专门的键盘事件来监听用户的按键操作，开发者可以通过监听这些事件获取按键的相关信息。
常用的键盘事件类型
js中主要提供了三类键盘事件，开发者可以根据实际需求选择合适的事件类型：
- keydown：当用户按下键盘上的任意按键时触发，按住按键不放会持续触发该事件，所有按键都会触发这个事件，包括功能键、修饰键等。
- keyup：当用户松开键盘上的按键时触发，每个按键松开时只会触发一次，同样支持所有类型的按键。
- keypress：当用户按下字符键时触发，按住字符键不放会持续触发，该事件不会响应功能键、方向键等非字符按键，目前已经逐渐被废弃，不建议在新项目中使用。
如何获取按键的相关信息
当键盘事件触发时，事件对象会包含当前按键的相关属性，开发者可以通过这些属性判断用户按下了哪个按键：
key属性
key属性返回按键对应的字符串值，比如按下字母a会返回"a"，按下回车键会返回"Enter"，按下方向键上会返回"ArrowUp"，这个值直观易懂，是目前推荐使用的属性。
keyCode属性
keyCode属性返回按键对应的数字编码，不同按键对应不同的数字，比如回车键的keyCode是13，空格键是32，方向键上是38。不过该属性已经被标准废弃，兼容性也不如key属性，仅建议在需要兼容老旧浏览器时使用。
code属性
code属性返回按键的物理位置对应的字符串，比如按下键盘左侧的Shift键会返回"ShiftLeft"，右侧的Shift键会返回"ShiftRight"，适合需要区分同功能不同位置按键的场景。
基础检测示例
下面是一个监听全局键盘按下事件，输出按键信息的简单示例：
// 监听全局的keydown事件
document.addEventListener('keydown', function(event) {
// 输出按键的key值
console.log('按下的按键key值:', event.key);
// 输出按键的keyCode值
console.log('按下的按键keyCode值:', event.keyCode);
// 输出按键的code值
console.log('按下的按键code值:', event.code);
});
常见场景实现
检测特定按键按下
如果需要在用户按下回车键时执行操作，可以通过判断event.key的值实现：
document.addEventListener('keydown', function(event) {
// 判断按下的是否是回车键
if (event.key === 'Enter') {
console.log('用户按下了回车键');
// 这里可以添加回车键对应的业务逻辑
}
});
检测组合键
组合键比如Ctrl+S保存、Ctrl+C复制等，需要同时判断修饰键和普通按键的状态，修饰键对应的属性有ctrlKey、shiftKey、altKey、metaKey，值为true时表示对应修饰键被按下：
document.addEventListener('keydown', function(event) {
// 检测是否按下了Ctrl+S组合键
if (event.ctrlKey && event.key === 's') {
// 阻止浏览器默认的保存行为
event.preventDefault();
console.log('触发了Ctrl+S保存操作');
// 这里添加自定义的保存逻辑
}
});
限制输入框输入内容
如果需要限制输入框只能输入数字，可以监听输入框的keydown事件，过滤非数字按键：
// 获取输入框元素
const inputEle = document.querySelector('#numberInput');
inputEle.addEventListener('keydown', function(event) {
// 获取按下的按键值
const key = event.key;
// 允许退格键、删除键、Tab键、方向键等操作
const allowKeys = ['Backspace', 'Delete', 'Tab', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
// 如果不是数字也不是允许的按键，就阻止默认行为
if (!/^d$/.test(key) && !allowKeys.includes(key)) {
event.preventDefault();
console.log('只能输入数字');
}
});
注意事项
- 键盘事件默认是冒泡的，如果需要只在特定元素内监听按键，可以给该元素绑定事件，而不是监听全局document。
- 部分浏览器对keypress事件的支持不一致，且标准已经废弃该事件，优先使用keydown和keyup事件。
- 在使用keyCode属性时，不同浏览器的编码可能存在差异，尽量不要依赖该属性做逻辑判断。
- 如果监听的事件需要阻止浏览器默认行为，比如Ctrl+S阻止默认保存，要使用
event.preventDefault()方法。
JavaScript键盘事件keydownkeyupkeyCode修改时间：2026-06-11 02:45:21