调用 element.blur() 可使支持聚焦的 DOM 元素主动失焦，触发 blur 事件；需确保元素可聚焦（如 input、button 或设 tabindex 的 div），普通 div/span 默认无效。
直接调用 element.blur() 就能让指定的 DOM 元素主动失去焦点，前提是该元素本身支持聚焦（如 <input>、<textarea>、<button>，或设置了 tabindex 的 <div> 等）。
blur() 方法的基本用法
blur() 是原生 Element 接口的方法，无需参数，执行后立即移除该元素的焦点状态，并触发其 blur 事件（如果已绑定）。
- 语法简单：
element.blur() - 不抛错：即使元素当前未聚焦，调用也安全，无副作用
- 不改变页面可见状态（比如不会收起移动端软键盘，但会触发失焦逻辑）
常见适用场景与写法
多数用于表单校验拦截、流程控制或修复焦点异常。
-
校验失败时锁住焦点：输入不合法，不让用户跳到下一个字段
input.addEventListener('blur', () => { if (!isValidEmail(input.value)) { input.classList.add('error'); input.focus(); // 重新聚焦 } }); -
按钮点击前手动失焦：解决移动端软键盘未收起、blur 事件未触发的问题
submitBtn.addEventListener('click', () => { input.blur(); // 强制触发 input 的 blur 处理逻辑 doSubmit(); }); -
清除全局焦点（例如模态框关闭时）
document.activeElement?.blur(); // 安全调用，避免 null 报错
注意 element 必须可聚焦
普通 <div> 或 <span> 默认无法聚焦，调用 blur() 无效（也不会报错）。需先赋予聚焦能力：
立即学习“Java免费学习笔记（深入）”；
- 添加
tabindex="-1"：JS 可聚焦，但不参与 Tab 导航<div id="box" tabindex="-1">内容</div> - 添加
tabindex="0"：既可 JS 聚焦，也可通过 Tab 键到达 - 设置后，才能成功调用
box.focus()和box.blur()
和 focus() 搭配使用的典型模式
两者常成对出现，用于引导用户操作流：
- 自动聚焦首个输入框：
firstInput.focus(); - 提交后让焦点离开输入框，防止重复提交：
input.blur(); - 错误恢复时重置焦点状态：
input.classList.remove('error'); input.focus();
