html的onBlur

onBlur 是 HTML 元素的一个事件属性，当元素失去焦点时触发。以下是详细解释：

核心概念

1. ​失去焦点（Blur）​​：当用户选中页面上的某个交互元素（如输入框）后，该元素即获得焦点（focus）；当用户点击其他地方或切换到其他元素时，该元素就会失去焦点（blur）。

2. ​作用场景​：常用于表单验证、实时保存数据等场景（例如用户填写完一个输入框后立即检查内容是否合法）。

基础语法

在 HTML 标签中直接定义：

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

通过 JavaScript 绑定事件：

document.getElementById("myInput").addEventListener("blur", () => {
  console.log("输入框失去焦点！");
});

典型使用场景

1. 输入验证

<input type="email" id="email" onblur="validateEmail()">
<script>
  function validateEmail() {
    const email = document.getElementById("email").value;
    if (!email.includes("@")) {
      alert("请输入有效的邮箱地址！");
    }
  }
</script>

（用户离开邮箱输入框时自动验证格式）

2. 实时保存数据

<textarea id="note" onblur="saveNote()"></textarea>
<script>
  function saveNote() {
    const content = document.getElementById("note").value;
    localStorage.setItem("userNote", content); // 保存到本地存储
  }
</script>

（用户离开文本框时自动保存内容）

注意事项

1. ​与 onchange 的区别​：

   • onchange：值被修改 ​且​ 失去焦点后触发。
   • onblur：​只要失去焦点就触发，无论值是否改变。

2. ​与 focus 事件对应​：

   inputElement.addEventListener("focus", () => {
     console.log("获得焦点");
   });
   
   inputElement.addEventListener("blur", () => {
     console.log("失去焦点");
   });

3. ​表单提交​：onblur 触发时机在表单提交（submit）之前。

兼容性

所有主流浏览器（Chrome/Firefox/Safari/Edge）均支持 onblur 事件，包括移动端浏览器。

⚠️ ​替代方案​：现代开发推荐使用 addEventListener('blur', ...) 替代 HTML 标签中的 onblur 属性，以实现更好的代码分离。