focus()失效主因是元素不可聚焦、dom未就绪或浏览器拦截；需确保元素可聚焦（原生标签或tabindex≥0）、在domcontentloaded后调用、并在用户交互中触发聚焦。
focus() 方法调用后没反应？检查元素是否可聚焦
直接调用 focus() 失效，最常见的原因是目标元素没有「可聚焦」能力。原生不可聚焦的元素（比如 <div>、<code><span></span>）默认不响应 focus()，即使加了 tabindex 也得是 0 或正值。
- 确保元素是原生可聚焦标签：如
<input>、<textarea></textarea>、<button></button>、<select></select> - 若必须对
<div> 聚焦，需显式设置 <code>tabindex="0"（不能是-1，否则无法通过 JS 主动聚焦） - 元素需已插入 DOM 且未被
display: none或visibility: hidden隐藏——opacity: 0不影响聚焦 - 把聚焦逻辑放到
DOMContentLoaded事件里，或使用defer的外部脚本 - React/Vue 等框架中，确保在
useEffect（或mounted）且 DOM 已挂载后再调用focus() - 避免在
window.onload里操作——它等所有资源（含图片）加载完，太晚；DOMContentLoaded更准 -
autofocus只在页面首次加载时生效，且仅限一个元素；后续 JS 调用不受此限制，但受“用户激活”约束 - 若需在模态框打开后聚焦，必须绑定在用户点击/回车等交互事件回调中（例如按钮
onclick里调用input.focus()） - 可配合
{ preventScroll: true }参数避免意外滚动：input.focus({ preventScroll: true })（注意 Safari 15.4+ 才支持该选项） - 监听
submit事件，在event.preventDefault()后或异步请求完成回调中重新聚焦 - 避免在
reset()前聚焦——重置会清除输入框内容，但焦点仍留在原处；重置后聚焦更符合直觉 - 移动端要注意：iOS Safari 对
focus()的触发时机更敏感，有时需加setTimeout微任务延迟（如setTimeout(() => input.focus(), 0)），但应尽量避免，优先用事件驱动
页面加载完成前调用 focus() 导致失败
DOM 还没就绪就执行 focus()，JS 找不到元素，自然静默失败。尤其在内联脚本或 中调用时极易踩坑。
自动聚焦被浏览器拦截？处理 autofocus 属性与 JS 冲突
现代浏览器（Chrome/Firefox/Safari）会阻止非用户手势触发的自动聚焦，尤其是弹窗、Tab 切换后立即聚焦输入框的场景。这时 autofocus 属性可能被忽略，手动 focus() 也会抛出 TypeError: Failed to execute 'focus' on 'HTMLElement': Cannot set focus on a non-focusable element 或静默失败。
表单提交后重置焦点？别只 reset() 表单
form.reset() 会清空值，但不会恢复初始焦点状态。用户提交后想让光标回到第一个输入框，得手动再调一次 focus()。
立即学习“前端免费学习笔记（深入）”；
