监听键盘事件需组合使用 keydown、input 和 composition 事件:keydown 捕获按键按下(含功能键,注意 event.repeat);input 监听最终值变化(适合校验,但中文输入法下延迟触发);compositionstart/update/end 精确处理中文输入过程;快捷键须用 keydown + 修饰键判断并 preventDefault。

监听键盘事件不难,但容易忽略关键细节——比如 keydown 和 keyup 的触发时机差异、重复触发问题、以及 input 事件在中文输入法下的不可靠性。
用 addEventListener 监听 keydown 最常用
多数场景下应优先用 keydown,它在按键按下瞬间触发,且能捕获所有键(包括 Tab、Enter、ArrowUp 等功能键):
-
keydown会重复触发长按(如按住A不放),需用event.repeat判断是否为重复事件 - 避免在
keydown中直接修改输入框内容,否则可能干扰用户输入(尤其配合 IME 时) - 若只关心字符输入(非功能键),应结合
event.key.length === 1或检查event.code
input 事件更适合监听真实值变化
input 在用户输入后(包括粘贴、删除、IME 上屏)才触发,适合做实时校验或同步状态:
- 它不会触发于
Tab、Esc等非输入键,也不响应快捷键(如Ctrl+V后需等上屏才触发) - 在中文输入法下,
input只在候选词确认后才触发,中间的拼音输入过程完全不触发 - 不能替代
keydown做快捷键响应(比如Ctrl+S保存)
处理中文输入法要绕开 keypress 和盲目监听 input
keypress 已被废弃,且在现代浏览器中对中文输入基本无效;而只依赖 input 会丢失“正在输入中”的状态。稳妥做法是组合监听:
立即学习“Java免费学习笔记(深入)”;
- 用
compositionstart检测输入法开始(如用户按下Shift切换到中文,或开始打拼音) - 用
compositionupdate获取当前未上屏的拼音/候选内容(event.data) - 用
compositionend标志输入完成,此时再读取input元素的value - 三者配合才能准确区分“用户正在打字”和“已确认输入”
快捷键判断必须用 keydown + 检查修饰键属性
判断 Ctrl+S、Cmd+K 这类组合键,不能只看 event.key,而要检查修饰键状态:
- 用
event.ctrlKey/event.metaKey(macOS 上Cmd对应metaKey) - 用
event.shiftKey、event.altKey判断是否同时按下 - 务必调用
event.preventDefault()阻止默认行为(如Ctrl+S触发浏览器保存页面) - 注意:某些系统级快捷键(如
Cmd+Tab)无法被网页捕获
真正麻烦的是混合场景:比如一个搜索框既要响应 Enter 提交,又要兼容中文输入法中途按 Enter 上屏。这时候光靠单一事件不够,得靠 composition 状态机 + keydown 键码判断来协同控制。漏掉任一环节,都会出现“按了两次 Enter 才提交”或“拼音没打完就提交”这类问题。











