javascript捕获键盘输入应优先使用keydown和keyup事件，通过event.key或event.code获取按键信息，结合ctrlkey等修饰键属性处理快捷键，并注意焦点设置、重复触发及内存泄漏问题。

JavaScript 中捕获键盘按键输入事件，核心是监听 keydown、keyup 和 keypress（已废弃）这三个事件，其中最常用且推荐的是 keydown 和 keyup。它们能准确反映用户按下和松开物理按键的动作，支持所有键（包括功能键、修饰键等），且兼容性好。

监听键盘事件的基本方式

通常将事件监听器绑定到 document 或具体输入元素（如 <input>、<textarea></textarea>）上：

• document.addEventListener('keydown', handler)：按键被按下时触发（重复触发，长按时会连续触发）
• document.addEventListener('keyup', handler)：按键被松开时触发（只触发一次）
• 避免使用 keypress：它仅针对可打印字符，不响应 Ctrl、Arrow、Escape 等键，且在现代浏览器中已被废弃

获取按下的具体按键信息

事件对象（event）提供多个属性来识别按键：

Java Maven Common

Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。

下载

• event.key：返回按键的语义值，如 "a"、"Enter"、"ArrowUp"、"Control" —— 推荐优先使用，直观易读
• event.code：返回物理键位标识，如 "KeyA"、"Enter"、"ArrowUp"、"ControlLeft" —— 适合处理布局无关的快捷键（例如区分左右 Ctrl）
• event.keyCode 和 event.which：已废弃，不要使用；历史遗留，行为不一致且不可靠

示例：判断是否按下了「空格键」或「Esc 键」

if (event.key === ' ') console.log('空格被按下'); if (event.key === 'Escape') console.log('退出操作');

处理组合键与修饰键

通过事件对象的布尔属性可判断修饰键（Ctrl、Shift、Alt、Meta）是否同时被按下：

• event.ctrlKey、event.shiftKey、event.altKey、event.metaKey（Mac 的 Command 键 / Windows 的 Win 键）
• 常用于实现快捷键，例如 Ctrl+S 保存：

if (event.key === 's' && event.ctrlKey) { event.preventDefault(); // 阻止浏览器默认保存行为 saveDocument(); }

注意事项与最佳实践

• 在非输入控件（如 div）上监听键盘事件前，需确保该元素有焦点（设置 tabindex="0" 并调用 .focus()），否则无法触发
• 敏感操作（如删除、提交）建议用 keyup 而非 keydown，避免因长按重复触发误操作
• 需要精确控制时，可结合 event.repeat 属性判断是否为自动重复触发（长按时为 true）
• 记得在不需要时移除监听器（removeEventListener），防止内存泄漏，尤其在单页应用中

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南