jQuery blur()事件：元素失去焦点时的处理-代码号

表单交互中，用户从一个输入框切换到另一个输入框，或者点了一下页面空白处让输入框失去焦点，这些动作在 jQuery 里都对应一个事件——blur。blur() 方法专门用来捕获和处理元素失去焦点的时刻。

blur 事件最典型的使用场景是表单校验。用户填完一个字段离开时，立刻检查输入内容是否合法，给出即时反馈。这种体验比提交表单后才报错要好很多——用户不用等到之后才发现前面某个字段填错了。

以前 blur 事件主要用在 <input> 这类表单元素上，现在主流浏览器已经把它扩展到了几乎所有元素类型。不过项目开发中使用频率较高的仍然是表单控件。

语法形式

触发 blur 事件：

$(selector).blur()

这行代码会让选中元素主动失去焦点，同时触发已绑定的 blur 处理函数。适合在特定条件下程序化地让元素失焦。

绑定 blur 事件：

$(selector).blur(function(){
    // 元素失去焦点时执行的代码
})

这是常规用法，给元素绑定一个失焦时执行的回调函数。

基础示例：检测输入框失去焦点

下面这个简单示例演示了 blur() 的绑定用法。输入框获得焦点后随便点一下别的地方，就会触发 alert。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>blur() 基础示例</title>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
    <label for="userName">请输入姓名：</label>
    <input type="text" id="userName" placeholder="输入后点击别处">
    <p style="color:#888;">输入内容后点击输入框以外的区域触发 blur 事件</p>

    <script>
        $(document).ready(function(){
            $("input").blur(function(){
                alert("输入框失去了焦点！");
            });
        });
    </script>
</body>
</html>

在输入框里随便打几个字，然后用鼠标点击页面空白处（或者按 Tab 键跳到下一个元素），alert 就弹出来了。这个交互流程在表单校验里就是核心逻辑——在 blur 的回调里检查输入值，不合格就给出提示。

blur 和 focus 的配合使用

blur() 和 focus() 是一对经常成对出现的方法。一个管失去焦点，一个管获得焦点。很多输入框的交互效果都是靠这两个事件配合完成的——获得焦点时高亮边框，失去焦点时恢复原样并触发校验。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>blur 与 focus 配合示例</title>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <style>
        .field-normal {
            border: 2px solid #ccc;
            padding: 8px;
            width: 260px;
            outline: none;
            transition: border-color 0.2s;
        }
        .field-focused {
            border-color: #2980b9;
            background-color: #eaf2f8;
        }
        .field-error {
            border-color: #c0392b;
            background-color: #fdedec;
        }
        .error-msg {
            color: #c0392b;
            font-size: 14px;
            margin-left: 8px;
            display: none;
        }
    </style>
</head>
<body>
    <label for="userEmail">请输入邮箱地址：</label>
    <input type="text" id="userEmail" class="field-normal" placeholder="例如 alan@ebingou.cn">
    <span class="error-msg" id="emailError">请输入有效的邮箱地址</span>

    <script>
        $(document).ready(function(){
            var $emailInput = $("#userEmail");
            var $errorMsg = $("#emailError");

            // 获得焦点时高亮
            $emailInput.focus(function(){
                $(this).removeClass("field-error").addClass("field-focused");
                $errorMsg.hide();
            });

            // 失去焦点时校验
            $emailInput.blur(function(){
                $(this).removeClass("field-focused");
                var value = $(this).val();
                // 检查是否包含 @ 符号
                if(value.indexOf("@") === -1 && value.length > 0){
                    $(this).addClass("field-error");
                    $errorMsg.show();
                } else {
                    $(this).removeClass("field-error");
                    $errorMsg.hide();
                }
            });
        });
    </script>
</body>
</html>

这个例子完整展示了表单校验的实现思路：

focus 时：清除错误状态，亮起蓝色边框提示用户当前正在输入。
blur 时：检查输入内容是否合法。如果已输入内容但不含 @，就标红提示；如果合法或为空，清除错误样式。

这种“即时校验”而非“提交时校验”的做法能有效减少用户的挫败感。我的经验是，简单的格式校验（邮箱格式、手机号长度、必填判断）放在 blur 里处理，逻辑清晰且反馈迅速。

blur 的实际应用场景

除了表单校验，blur() 还有一些其他常见用途：

自动保存草稿： 用户编辑完离开输入区域时，自动保存当前内容。
下拉菜单关闭： 菜单展开后，点击菜单以外的区域让它失去焦点从而自动收起。
输入格式自动修正： 用户输入完离开时，自动去掉首尾空格、统一格式等。

有件事需要留心：blur 事件在元素真正失去焦点时触发，如果你在 blur 的回调里做了会让页面其他元素获得焦点的操作，可能触发一连串的焦点跳转事件。这种连锁反应在复杂表单里偶尔会造成意料之外的行为，调试时可以加 console.log 追踪焦点流向。

本节课程知识要点

blur() 用于处理元素失去焦点的时刻，两种用法：不传参触发 blur，传回调函数绑定 blur。
和 focus() 成对使用，一个管失焦一个管获焦，构成完整的焦点状态管理。
适合在表单校验场景中做即时反馈，用户离开输入框时立刻检查输入内容。
原本仅用于表单元素，现在浏览器已扩展到所有元素类型，但表单控件仍是主要使用场景。
注意 blur 回调中不要意外触发其他元素的 focus 事件，避免焦点跳转的连锁反应。

blur() 方法解决的问题很聚焦——在元素失去焦点的那一刻执行特定逻辑。配合 focus() 使用，构成了 jQuery 表单交互的基础能力。不管是在输入框校验、自动保存草稿还是自定义组件开发中，理解焦点事件的触发时机和处理方式，都能让交互代码写得更流畅、更贴合用户的使用习惯。

本文标签：

jQuery blur()事件：元素失去焦点时的处理

语法形式

基础示例：检测输入框失去焦点

blur 和 focus 的配合使用

blur 的实际应用场景

本节课程知识要点

感谢您的认可和支持