HTML DOM onblur

学习目标

理解 onblur 事件的触发时机及其与 onfocus 的互补关系
掌握在表单验证、数据格式化等场景中使用 onblur 的方法
能够通过 HTML 内联、JavaScript 属性或 addEventListener 绑定该事件
了解其支持的元素范围及典型应用模式

什么是 onblur 事件

onblur 是一个失焦事件，当某个元素失去焦点时触发。这通常发生在以下情况：

用户点击页面其他位置
按 Tab 键跳转到下一个可聚焦元素
通过 JavaScript 调用其他元素的 .focus() 方法

它是 onfocus 的“镜像”事件：
onfocus：获得焦点 → 进入
onblur：失去焦点 → 离开

支持的 HTML 元素

onblur 可用于所有可聚焦（focusable）的 HTML 元素，但以下元素不支持（因其不可交互或不可聚焦）：

<base>
<bdo>
<br>
<head>
<html>
<iframe>
<meta>
<param>
<script>
<style>
<title>

常见可用元素：
<input>、<textarea>、<select>、<button>、<a href>、以及设置了 tabindex 的任意元素（如 <div tabindex="0">）

语法与绑定方式

1. 内联方式

<input type="text" onblur="handleBlur()">

2. 属性赋值

element.onblur = function() {
    handleBlur();
};

3. `addEventListener()`

element.addEventListener("blur", handleBlur);

推荐使用 addEventListener：支持多个监听器、代码解耦、更易维护。

实战示例

输入内容自动转为大写

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>onblur 自动大写示例</title>
    <style>
        body { text-align: center; padding: 40px; font-family: Arial; }
        h1 { color: green; }
        input { padding: 8px; margin: 10px; border: 1px solid #ccc; }
    </style>
</head>
<body>
    <h1>编程学习网</h1>
    <h2>onblur 事件演示</h2>
    
    用户名：<input type="text" id="username" 
                  placeholder="输入后点击别处"
                  onblur="convertToUppercase(this)">

    <script>
        function convertToUppercase(input) {
            input.value = input.value.toUpperCase();
        }
    </script>
</body>
</html>

效果：用户在输入框中输入 "alice"，点击页面其他位置后，内容自动变为 "ALICE"。

表单验证 + 错误提示

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>onblur 表单验证</title>
    <style>
        body { text-align: center; padding: 40px; font-family: Arial; }
        h1 { color: green; }
        .error { color: red; font-size: 0.9em; margin-top: 5px; display: none; }
        .valid { border: 2px solid green; }
        .invalid { border: 2px solid red; }
    </style>
</head>
<body>
    <h1>编程学习网</h1>
    <h2>邮箱格式验证（失焦时触发）</h2>
    
    <input type="email" id="email" placeholder="请输入邮箱">
    <p id="emailError" class="error">请输入有效的邮箱地址！</p>

    <script>
        const emailInput = document.getElementById("email");
        const errorText = document.getElementById("emailError");

        emailInput.addEventListener("blur", function() {
            const email = this.value.trim();
            const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);

            if (email && !isValid) {
                this.className = "invalid";
                errorText.style.display = "block";
            } else {
                this.className = email ? "valid" : "";
                errorText.style.display = "none";
            }
        });
    </script>
</body>
</html>

应用价值：
避免用户每按一次键就验证（比 oninput 更友好）
在用户“完成输入”后再反馈，减少干扰

应用场景

场景	说明
数据格式化	自动转大写、格式化电话号码、货币显示等
表单验证	检查邮箱、身份证、密码强度等
保存草稿	用户离开字段时自动保存未提交内容
清理临时状态	隐藏聚焦时显示的提示、重置高亮样式
日志记录	记录用户在某个字段的停留和操作行为

onblur vs onchange

事件	触发条件	是否要求值改变
`onblur`	元素失去焦点	❌ 否（即使值未变也会触发）
`onchange`	值改变且失去焦点	✅ 是（值不变则不触发）

选择建议：
只关心“是否离开” → 用 onblur
关心“值是否被修改” → 用 onchange

重点总结

onblur 在元素失去焦点时触发，是表单交互的关键事件
与 onfocus 配合，可实现完整的“进入 - 离开”交互闭环
广泛用于数据格式化、延迟验证、状态清理等场景
支持所有可聚焦元素，绑定方式灵活
不要求值发生变化，即使内容未改也会触发

思考题

如果用户在输入框中输入内容后，直接关闭浏览器标签页，onblur 会触发吗？为什么？
如何结合 onfocus 和 onblur 实现“聚焦时显示默认提示，失焦时若为空则恢复提示文字”的功能？
在移动端（手机浏览器）上，onblur 的行为与桌面端有何不同？开发者需要注意什么？

源本科技 | 码上会

学习目标

什么是 onblur 事件

支持的 HTML 元素

语法与绑定方式

1. 内联方式

2. 属性赋值

3. addEventListener()

实战示例

输入内容自动转为大写

表单验证 + 错误提示

应用场景

onblur vs onchange

重点总结

思考题

3. `addEventListener()`