onkeyup是HTML中的一种键盘事件属性,属于全局事件处理器,当用户在键盘上松开某个按键时触发。它既可以直接写在HTML标签里,也可以在脚本中通过元素的事件属性或事件监听接口绑定处理函数。在常见的键盘事件序列中,keyup通常排在keydown与keypress之后,是三个事件里最后发生的一个,因此按键的输入内容在这一时刻已经确定。
定义
onkeyup是HTML元素上的一个事件属性,用于指定当用户松开键盘按键时所要运行的脚本。它属于全局事件属性,可以写在大多数HTML元素上,语法形式为在标签内给元素的onkeyup特性赋一段脚本,例如在输入框上设置松开按键时调用某个函数。[1]
在文档对象模型(DOM)中,与之对应的脚本属性同样名为onkeyup,可以给元素对象的onkeyup赋值一个处理函数;使用标准事件监听接口时,监听的则是名为keyup的事件。[2]该事件触发时传给处理程序的事件对象类型为KeyboardEvent,其中保存了与本次按键相关的信息。[3]
它并不能用在所有元素上。按照常见参考资料的说法,base、bdo、br、head、html、iframe、meta、param、script、style、title等元素不支持onkeyup属性。[1]
原理
键盘事件以一次按键操作为中心依次发生:用户按下某个键时先触发keydown,随后在输入字符的过程中触发keypress,当手指离开按键时最后触发keyup。相关参考资料把这一顺序概括为onkeydown、onkeypress、onkeyup三步。[1]一个从0开始介绍键盘事件的实践总结也给出了相同的先后关系,并指出长按按键时keydown与keypress会反复触发,而keyup只在松手时出现一次。
这种先后关系与浏览器处理输入的时机有关。有技术文章分析称,keydown触发时字符尚未进入系统输入流,keypress触发时字符已进入但还没被处理,到keyup触发时输入流已经被系统处理完毕。[4]正因为如此,开发者常把keyup当作读取表单最新值的时机:只有在整个按键事件循环结束后,页面元素的值才完成更新。[5]
不同来源对事件是否冒泡、能否取消的记载并不一致。微软的技术文档把早期实现中的onkeyup事件描述为可冒泡、不可取消。[6]而另一份参考资料则记载keyup可冒泡、可取消,接口为KeyboardEvent,并归于DOM Level 2事件。[3]规范层面的现代定义把键盘事件统一归入KeyboardEvent接口处理。[2]
发展历程
键盘事件在早期HTML规范中就已经出现。HTML 4的第18.2.3节对onkeyup的定义是:在某个元素上,按键被放开时会发生onkeyup事件,该属性可以用在多数元素上。[7]
随着DOM标准演进,键盘事件被写入DOM Level 2 Events规范,并在后续的DOM Level 3与UI Events规范中继续调整。KeyboardEvent接口规范经历过多轮草案,DOM Events Level 2阶段曾因缺乏共识而未定稿,之后在Level 3中重新整理,早期各家浏览器因此实现过互不相同的初始化方法。[8]现代开发中更推荐使用事件构造函数或事件监听接口,而不是早期的初始化方法。[2]
规范化的结果之一是事件对象携带的信息更完整。键盘事件对象可以给出按键的代码、修饰键状态等字段,使开发者能够区分按下的具体物理按键与最终产生的字符。[3]
应用
onkeyup最常见的用途是监听用户在输入框中的键入行为。由于松手时输入内容已经确定,开发者可以在这一时刻读取输入框的最新值并作出响应,例如把输入内容同步显示到页面其他位置。[3]在输入法参与的场景中,keyup事件会与合成事件交替出现,用于标识输入法正在组字的状态字段会被置为真。[9]
它也被用于组合按键与界面控制。培训教材给出的示例是在文本框中松开按键时改变背景颜色,说明松键动作可以直接驱动页面样式的变化。[10]在文档编辑类软件的宏脚本接口中,同样提供了设置onkeyup属性的能力,用来指定事件触发时执行的脚本名称。[11]
局限
onkeyup只能反映物理按键被松开,无法直接说明用户实际输入了什么字符。相关材料指出,keydown与keyup记录的是按键动作本身,keypress记录的才是被键入的字符,两者含义并不相同。[2]此外,keypress会忽略delete、方向键、page up、page down、home、end、ctrl、alt、shift、esc等按键,需要处理这些键时只能借助keydown或keyup。
在输入法参与的中文等输入场景中,keyup的表现并不稳定。有实践总结提到,不同浏览器与输入法下的触发流程存在差异,有的情况下中文输入不会产生keypress事件,因此单靠keyup难以可靠捕捉每一次内容变化,监听输入事件往往更为合适。[12]
规范中也存在需要特殊处理的边界情形。当用户在输入法组字过程中松开按键时,规范要求用户代理保证keydown与keyup成对出现,必要时补发一个对应的keyup,或者抑制多余的事件,以免留下落单的按键事件。[13]由于各来源对keyup能否取消、是否冒泡的记载存在差异,依赖取消默认行为来实现拦截的做法需要逐项验证。[6]
参见
-
onkeydown —— 与onkeyup成对出现的键盘事件属性,在按下按键时触发。
-
onkeypress —— 键盘事件属性,用于处理被键入的字符,现已不被推荐使用。
-
KeyboardEvent —— 键盘事件所使用的事件对象接口,保存按键代码与修饰键状态。
-
事件冒泡 —— 描述事件沿DOM树向上传播的机制,与键盘事件的处理顺序相关。
-
输入法编辑器 —— 涉及组字过程的输入工具,会改变键盘事件的实际触发流程。
参考资料
- HTML onkeyup 事件属性 [引用日期2026-10-14]
- keyup [引用日期2026-10-14]
- onkeyup Event [引用日期2026-10-14]
- onkeydown、onkeypress、onkeyup的区别 [引用日期2026-10-14]
- microsoft.com 上的网页 [引用日期2026-10-14]
- onkeyup event (Windows) [引用日期2026-10-14]
- Script Junkie - 跳到主要內容 跳過到 Ask Learn 聊天體驗 [引用日期2026-10-14]
- KeyboardEvent: initKeyboardEvent() method [引用日期2026-10-14]
- w3.org 上的网页 [引用日期2026-10-14]
- NIELIT Gorakhpur [引用日期2026-10-14]
- onkeyup Property - Skip to main content [引用日期2026-10-14]
- 从0开始构建自己的前端知识体系-JS-事件-键盘事件总结 [引用日期2026-10-14]
- w3.org 上的网页 [引用日期2026-10-14]