源本科技 | 码上会

logo
源本科技 码上会
一站式数字化转型技能学习平台

HTML DOM onkeyup

2026/01/01
10
0

学习目标

  • 理解 onkeyup 事件的触发时机及其在键盘事件序列中的位置

  • 掌握三种绑定 onkeyup 事件的方法（HTML 内联、JS 属性、addEventListener）

  • 能够利用 onkeyup 实现实时输入反馈、表单验证等交互功能

  • 了解其支持的元素范围与典型应用场景

什么是 onkeyup 事件

onkeyup 是 HTML DOM 中的一个键盘事件，当用户释放（松开）之前按下的键时触发。

它是键盘交互三部曲的最后一步：

  1. onkeydown：按键刚被按下

  2. onkeypress：按键产生字符（仅限可打印字符，已废弃）

  3. onkeyup：按键被释放

优势：此时输入框的值（.value）已经更新，适合用于读取最新输入内容。

支持的 HTML 元素

onkeyup 可用于所有可聚焦（focusable）的 HTML 元素，但以下元素不支持：

  • <base>

  • <bdo>

  • <br>

  • <head>

  • <html>

  • <iframe>

  • <meta>

  • <param>

  • <script>

  • <style>

  • <title>

常见可用元素：<input>、<textarea>、<div tabindex="0">、<body>（全局监听）等。

绑定的三种方式

1. 内联方式

<input type="text" onkeyup="handleKeyUp()">

2. 属性赋值

element.onkeyup = function(event) {
    handleKeyUp(event);
};

3. addEventListener()

element.addEventListener("keyup", handleKeyUp);

实战示例

示例 1：使用 addEventListener 监听按键释放

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>DOM onkeyup 事件</title>
</head>
<body>
    <h1 style="color: green;">
        编程学习网
    </h1>
    <p>请在下方输入框中按下并释放任意键</p>
    <input type="text" id="inputField" style="background-color: green; padding: 8px;">

    <script>
        document.getElementById("inputField").addEventListener("keyup", handleKeyUp);

        function handleKeyUp() {
            document.getElementById("inputField").style.backgroundColor = "yellow";
        }
    </script>
</body>
</html>

效果：无论按哪个键（包括 Enter、方向键、字母等），只要松开，背景即变黄。

示例 2：实时显示用户输入内容（HTML 内联方式）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>实时输入反馈</title>
</head>
<body>
    请输入您的姓名：
    <input type="text" id="nameInput" onkeyup="updateName()">

    <p>我的姓名是：<span id="displayName"></span></p>

    <script>
        function updateName() {
            const input = document.getElementById("nameInput");
            const name = input.value;
            document.getElementById("displayName").textContent = name;

            // 视觉反馈：文字变白，背景变红
            input.style.color = 'white';
            input.style.backgroundColor = 'red';
        }
    </script>
</body>
</html>

应用场景：搜索建议、表单预览、字数统计、实时验证等。

典型应用场景

场景

说明

实时搜索

用户停止输入后立即发起搜索请求（常配合防抖）

输入验证

检查邮箱格式、密码强度等，并即时反馈

动态预览

如 Markdown 编辑器的实时渲染

快捷键组合

结合 event.ctrlKey、event.key 判断组合键（如 Ctrl + S）

注意：若需高频响应（如每按一次键就触发），应考虑性能优化（如使用防抖 debounce）。

keydown / keypress

事件

触发时机

是否包含功能键

.value 是否已更新

推荐度

keydown

按下瞬间

✅ 是

❌ 否（旧值）

高（通用）

keypress

按下可打印字符

❌ 否

❌ 否

❌ 已废弃

keyup

松开按键

✅ 是

✅ 是（新值）

高（需最新值时）

最佳实践：

  • 需要最新输入值 → 用 keyup

  • 需要拦截输入或监听所有按键 → 用 keydown

重点总结

  • onkeyup 在松开按键时触发，此时输入值已更新

  • 支持所有可聚焦元素，不支持元数据类标签

  • 三种绑定方式中，推荐使用 addEventListener

  • 适用于实时反馈、表单验证、动态预览等场景

  • 与 keydown 互补：一个关注“按下”，一个关注“释放后结果”

思考题

  1. 为什么实现“实时搜索”功能，通常选择 keyup 而不是 keydown？如果用户按住某个键不放，会有什么问题？如何优化？

  2. 如果要在用户输入完手机号后自动格式化为 138****1234，使用 keyup 是否合适？为什么？

  3. 如何结合 keyup 和 setTimeout 实现简单的“输入停止后 500ms 再执行”的防抖效果？请写出代码。