autofocus属性仅在HTML初始解析时对首个符合条件元素生效，动态插入、隐藏、禁用、多实例或iOS Safari均会导致失效；SPA需JS主动focus，移动端须绑定用户手势。
autofocus属性为什么写了但没反应
它不是“写上就聚焦”的开关，而是浏览器在 HTML 初始解析阶段对第一个符合条件的元素做的一次性处理。绝大多数“没反应”不是你代码错了，是它根本没机会运行。
常见失效场景包括：
-
autofocus写在动态插入的<input>上（比如el.innerHTML = '<input autofocus>'），浏览器不会重新解析 - 元素被
display: none或visibility: hidden包裹，即使 HTML 里有属性也跳过聚焦 -
input带disabled属性，或类型是hidden、checkbox、file - 页面中出现多个
autofocus，只有 DOM 顺序第一个生效，其余静默忽略 - iOS Safari 直接策略性忽略 —— 不是 bug，是为防止非用户手势触发键盘弹出
哪些元素真正支持 autofocus
必须同时满足：原生可聚焦 + 可文本输入 + 初始可见 + 未禁用。不是所有表单控件都行。
✅ 稳定支持：<input type="text">、<input type="email">、<input type="search">、<textarea>
立即学习“前端免费学习笔记（深入）”；
⚠️ 条件支持：<select>（Chrome/Edge 支持，Firefox 和旧 Safari 忽略，错误信息可能是 autofocus is not supported on <select>）
❌ 完全无效：<input type="hidden">、<input disabled>、<div tabindex="0">、<input style="display:none">
注意：readonly 不影响聚焦，但 disabled 会彻底禁用；父级带 inert 或自身 tabindex="-1" 也会绕过自动聚焦流程。
SPA 和模态框中怎么让输入框真正获得焦点
React/Vue 中写 <input autofocus> 几乎必然失效，因为组件挂载时 DOM 已存在，错过 HTML 解析时机。必须改用 JS 主动控制。
实操要点：
- React：用
useEffect(() => { inputRef.current?.focus(); }, [])，并包裹if (typeof window !== 'undefined')防 SSR 报错 - Vue 3：在
onMounted中调用inputRef.value?.focus()，确保v-if已为true - 原生 JS 模态框：监听弹窗显示事件（如
shown），或用requestAnimationFrame(() => input.focus())延迟到下一帧，避开 CSS transition 未完成导致的不可聚焦 - 关键校验：调用前检查
document.activeElement !== input，避免覆盖用户当前操作
移动端（尤其 iOS Safari）聚焦失败的兜底方案
iOS Safari 对非用户手势上下文中的 .focus() 调用同样拦截，哪怕 DOM 已挂载、元素可见、未禁用。强行聚焦可能静默失败，或软键盘不弹出。
可靠做法是绑定一次用户交互后立即聚焦：
- 给触发按钮加
onclick="document.getElementById('search').focus()" - 或更现代的方式：
document.body.addEventListener('click', handler, { once: true })，回调里调input.focus() - 若弹窗由异步逻辑打开（如 API 返回后），需缓存初始点击事件对象，在响应中复用其上下文合法性
- 别忘了配套处理：设置
role="dialog"、aria-modal="true"、aria-labelledby，否则屏幕阅读器无法识别模态状态
真正容易被忽略的是焦点陷阱（focus trap）—— autofoucs 或 .focus() 只解决“第一次聚焦”，后续 Tab 键是否只在模态框内循环，得靠手动实现，否则无障碍测试直接失败。
