input.blur()可主动触发输入框失去焦点，适用于表单收尾、自动跳转、防键盘遮挡等场景，需确保元素可聚焦且DOM已更新，推荐用setTimeout(0)延迟调用以避免冲突。
input.blur() 主动触发失去焦点的典型场景
直接调用 blur() 方法能让 input 元素立即放弃当前焦点，这和用户点击别处或按 Tab 键的效果一致，但由 JS 主动控制。它不依赖用户交互，适合在表单流程中「强制收尾」某个输入环节。
常见用途包括：提交后清空并移出焦点、多步表单自动跳转、防止键盘遮挡（移动端）、配合 oninput 做防抖验证后收束焦点。
- 必须确保目标元素已渲染且未被
disabled或readonly - 在 Vue/React 等框架中，需等 DOM 更新完成（如
nextTick或useEffect的 layout 阶段）再调用，否则可能报错Cannot read property 'blur' of null - Chrome 中对
contenteditable元素或某些 shadow DOM 内部 input，blur()可能静默失败，建议加 try-catch
用 setTimeout 延迟 blur 避免 focus 冲突
直接在 oninput 或按钮 click 里调用 blur() 有时会失效——尤其是当事件触发时焦点还没真正落在该元素上（比如刚点击 input 就立刻 blur），浏览器会忽略这次调用。
可靠做法是把 blur() 推迟到下一宏任务：
立即学习“前端免费学习笔记（深入）”；
document.getElementById('myInput').addEventListener('input', () => {
setTimeout(() => {
document.getElementById('myInput').blur();
}, 0);
});
- 用
setTimeout(..., 0)比requestAnimationFrame更稳妥，后者在某些滚动/动画帧中可能被跳过 - 若需更精确控制（如等用户停输 500ms 后 blur），可结合 clearTimeout 做防抖，但注意不要在 blur 后继续触发 input 事件造成循环
blur 后立即 focus 到下一个 input 的链式操作
在地址、身份证等连续填写场景中，常需「当前输入合法 → 自动跳到下一项」。关键不是只 blur，而是 blur + focus 组合要原子化，否则中间可能被用户中断。
推荐写法：
const inputs = document.querySelectorAll('input.step');
inputs.forEach((input, i) => {
input.addEventListener('blur', () => {
if (isValid(input.value)) {
if (i < inputs.length - 1) {
// 确保下一个 input 可聚焦（tabindex ≥ 0 或原生可聚焦）
setTimeout(() => inputs[i + 1].focus(), 0);
}
}
});
});
- 跳转前务必校验值，否则用户输错还被强制推进，体验极差
- 不要用
inputs[i + 1].click()替代focus()，click 可能触发额外事件（如打开软键盘、触发表单验证） - 移动端 Safari 对连续 focus 调用较敏感，加
setTimeout是必要缓冲
blur 失效却无报错？检查 tabindex 和可聚焦性
blur() 调用成功但焦点没消失，大概率是因为该元素当前不可聚焦——不是「有没有 tabindex」的问题，而是「是否满足可聚焦条件」。
一个 input 元素要能被 blur() 影响，必须同时满足：
- 未设置
disabled属性（哪怕只是disabled=""） - 未设置
readonly（readonly元素仍可聚焦，但blur()通常有效；真正影响的是disabled） - 在 DOM 中存在且未被
display: none或visibility: hidden完全隐藏（opacity: 0不影响） - 父容器没有
pointer-events: none（否则事件委托链断裂，blur 可能不触发）
调试时可临时加一句：console.log(input.matches(':focus'))，确认它是否真处于焦点状态再调用 blur()。
