jQuery keyup()事件：按键松开时的处理-代码号

键盘事件的三个方法里，keyup() 是触发时机最晚的一个——用户在键盘上松开按键的那一瞬间，keyup 事件才被触发。和 keydown（按下触发）以及 keypress（字符键按下触发）相比，keyup 的时机特性决定了它在某些场景下有独特的优势。

keyup() 的一个实用特性是：当你需要获取输入框的最终值时，keyup 是最靠谱的选择。因为 keydown 触发时字符还没来得及写入输入框，keypress 虽然比 keydown 稍晚但也可能早于值的更新，而 keyup 触发时输入框的值已经更新完毕。这就是为什么做实时搜索联想或输入同步时，很多人习惯用 keyup——取值时机有保障。

语法形式

触发 keyup 事件：

$(selector).keyup()

程序化地触发 keyup 事件。

绑定 keyup 事件：

$(selector).keyup(function(event){
    // 按键松开时执行的代码
})

给选中元素绑定按键松开事件。event.which 同样可以获取按键的键码。

基础示例：按下和松开的视觉对比

下面这个例子展示了 keydown 和 keyup 的触发时机差异。按下按键时输入框变红色，松开时变黄颜色，视觉上能直观感受到两个事件的先后顺序。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>keyup 与 keydown 对比示例</title>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
    <p>在输入框中按住一个键不放，观察颜色变化：</p>
    <input type="text" id="visualInput" style="padding:8px;width:260px;" placeholder="按住不放看效果">

    <script>
        $(document).ready(function(){
            $("input").keydown(function(){
                $("input").css("background-color", "#e74c3c");
            });
            $("input").keyup(function(){
                $("input").css("background-color", "#f9e79f");
            });
        });
    </script>
</body>
</html>

按住一个键不放，输入框保持红色（keydown 状态）；松开手指的瞬间变成黄颜色（keyup 触发）。这个颜色切换很直观地展示了两个事件的触发时机。当然真实项目里不会用 keyup 来改样式，更多是用它来做输入内容的实时处理。

keyup 的实际应用场景

在日常开发中，keyup 有几个比较典型的用途：

实时搜索联想： 用户输入关键词后松开按键，立刻读取输入框的当前值并发起搜索请求。这是 keyup 最常见的用途之一。

输入内容同步： 一个输入框的内容需要实时镜像到另一个区域（比如预览区），用 keyup 取新值更新即可。

字符计数： 统计输入框当前已输入的字符数，也是用 keyup 来确保计数值和实际内容一致。

下面是一个实时搜索的简单演示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>keyup 实时搜索示例</title>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
    <p>输入关键词，松开按键后触发搜索：</p>
    <input type="text" id="searchInput" placeholder="输入搜索关键词" style="padding:8px;width:300px;">
    <p id="searchHint" style="color:#1a5276;font-weight:bold;"></p>

    <script>
        $("#searchInput").keyup(function(){
            var keyword = $(this).val();
            if(keyword.length > 0){
                $("#searchHint").text("正在搜索：" + keyword);
                // 实际项目里这里用 $.ajax() 或 $.get() 发请求
            } else {
                $("#searchHint").text("");
            }
        });
    </script>
</body>
</html>

每松开一个按键，代码都会读取输入框的新值并显示。如果输入框为空，提示文字自动清空。这个模式在实现搜索建议、输入校验、字数统计等功能时很适用。

keyup 的局限性

keyup 虽然取值时机可靠，但它有个明显的短板——只响应键盘操作。如果用户通过鼠标右键粘贴内容，或者拖拽文字到输入框里，keyup 不会被触发，也就拿不到更新后的值。对于这种非键盘输入场景，用 input 事件会更。

keyup 的触发频率取决于用户松键的频率，长按一个键时 keyup 只在之后松开时触发一次。如果要做“按住不放连续触发”的效果（比如游戏里的持续移动），应该用 keydown 配合定时器来实现。

三个键盘事件的完整对比

把 keydown、keypress、keyup 放在一起做个：

事件方法	触发时机	响应范围	取值时机
`keydown()`	按键按下瞬间	所有按键	输入框值尚未更新
`keypress()`	字符键按下时	仅字符键	输入框值尚未更新
`keyup()`	按键松开瞬间	所有按键	输入框值已更新

这个表格记下来，写键盘交互时该用哪个方法就一目了然了。我个人习惯是：做实时搜索或输入同步用 keyup，做快捷键和方向键控制用 keydown，做字数统计用 input 事件（兼容性好）。三个方法根据需求组合使用，键盘交互的覆盖面会更完整。

本节课程知识要点

keyup() 在用户松开键盘按键的瞬间触发，是三个键盘事件中触发时机最晚的一个。
触发时输入框的值已经更新完毕，适合做实时搜索、输入同步、字符计数等需要取新值的功能。
对非键盘输入（鼠标粘贴、拖拽文字）无效，需要全局输入监听时应使用 input 事件。
键盘事件触发顺序为 keydown → keypress → keyup。
配合 event.which 可判断松开了哪个键，不过大多数 keyup 场景直接读输入框的值就够了。

keyup() 是键盘事件体系里的之后一环。三个键盘事件从按下到松开，覆盖了按键交互的完整时间线：keydown 管按下、keypress 管字符输入、keyup 管松开取值。理解了它们各自的触发时机和适用场景，键盘交互相关的功能开发就不容易踩坑了。到这里，jQuery 事件体系里的鼠标事件、表单事件和键盘事件三大类都已经讲完，前端交互的基础能力已经比较完整了。

本文标签：

jQuery keyup()事件：按键松开时的处理