autofocus仅在html初始解析时对首个符合条件的原生表单控件生效，非“写上就聚焦”；动态插入、隐藏、disabled、多实例、移动端及spa场景均失效，须用js手动focus()并确保元素可见、已挂载且处于用户交互上下文。

autofocus 属性不是“写上就聚焦”的开关，它只在 HTML 初始解析阶段对第一个符合条件的原生表单控件生效；绝大多数失效场景，是因为浏览器压根没执行它——不是你代码错，是它没机会运行。

autofocus 什么时候根本不会触发

浏览器只在解析原始 HTML 字符串时扫描一次 autofocus，之后所有 DOM 变更都与它无关：

• document.body.innerHTML = '<input type="text" autofocus>' → 新增节点不重新解析，属性存在但无效
• Vue/React 组件里写 <input autofocus> → SSR 或 hydration 后 DOM 才挂载，错过解析时机
• <div style="display: none"><input autofocus></div> → 元素初始不可见，被跳过
• 多个 <input autofocus> → 只有源码中第一个被解析到的生效，其余静默忽略（HTML5 规范行为）
• <input type="hidden" autofocus> 或 <div autofocus> → 元素本身不可聚焦，属性无效且不报错 <h3>哪些元素真正支持 autofocus</h3> <p>仅限原生、可交互、未禁用的表单控件，且浏览器支持该类型本身：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/ai/3484" title="悠船"><img src="https://img.php.cn/upload/ai_manual/001/246/273/178599428323880.png" alt="悠船" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/ai/3484" title="悠船" class="overflowclass">悠船</a> <p class="overflowclass">悠船是一款AI图像与设计工具，Midjourney 官方推出的中文版 AI 图像生成工具。</p> </div> <a rel="nofollow" href="/ai/3484" title="悠船" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul> <li>✅ 稳定支持：<code><input type="text">、<input type="search">、<input type="email">、<textarea></textarea>、<button></button>
• ⚠️ 条件支持：<select></select>（Chrome/Edge 支持，Firefox 和旧 Safari 忽略）；<input type="color">（属性可读写，但 Safari 不支持该类型）
• ❌ 完全无效：<input type="hidden">、<input disabled>、<input tabindex="-1">、<div tabindex="0">（<code>autofocus 不认 tabindex）

  移动端和 SPA 场景下必须用 JS focus()

  iOS Safari 几乎总是静默丢弃 autofocus，SPA 路由切换后新渲染的输入框也一样。可靠做法是等 DOM 真实挂载、元素可见、且未被用户主动操作后再调用 .focus()：

  • React：用 useEffect(() => { inputRef.current?.focus() }, [])，并包裹 if (typeof window !== 'undefined') 防 SSR 报错
  • Vue 3：在 onMounted 中调用 inputRef.value?.focus()，确保 v-if 已为 true
  • 原生 JS：监听 DOMContentLoaded 后检查 document.activeElement !== input，避免覆盖用户当前焦点
  • 更稳妥的 iOS 方案：绑定一次 click 或 touchstart 到按钮或 body，回调中立即调用 input.focus()

  容易被忽略的焦点抢占问题

  autofocus 不触发 focus 事件，也不保证软键盘弹出。更隐蔽的问题是：密码管理器、翻译插件、甚至某些框架内部逻辑，可能在页面加载后几毫秒内把焦点抢走。此时控制台无报错，autofocus 也确实执行过了，但光标就是不出现——这种“无声失效”，比语法错误更难定位。