autofocus 属性在多数场景下直接失效，因其仅在html解析时对首个符合条件元素生效，动态插入、框架挂载、隐藏态模态框及spa路由切换后均不触发；支持元素限于未禁用且可见的text/email/textarea/button，select兼容性差，hidden/checkbox/file/div[tabindex]等完全无效；ios safari因安全策略禁止非用户手势上下文自动唤起键盘，故首页或无手势调用focus()均失败；可靠方案是移除autofocus，用requestanimationframe延迟执行focus()并校验已挂载、可见、可聚焦三条件，且用户手势内同步调用。
autofocus 属性为什么在多数场景下直接失效
它只在浏览器解析原始 HTML 字符串时扫描一次，且仅对第一个满足条件的元素生效。动态插入（innerHTML、appendChild）、框架挂载（Vue v-if、React useState）、模态框隐藏态（display: none）、SPA 路由切换后新渲染的表单——这些场景中，autofocus 都是“过期状态”，浏览器压根不处理。
哪些元素真正支持 autofocus，哪些只是看起来支持
支持与否取决于类型 + 状态双重约束，不是写了就管用：
-
<input type="text">、<input type="email">、<textarea></textarea>、<button></button>：✅ 安全可用，只要未disabled、初始可见、无inert父级 -
<select></select>：⚠️ Chrome/Edge 可能聚焦，Firefox 和旧 Safari 会静默忽略，控制台报错autofocus is not supported on <select></select> -
<input type="hidden">、<input type="checkbox">、<input type="file">、<div tabindex="0">：❌ 完全无效，规范不支持 <h3>iOS Safari 下 autofocus 几乎必然失败的原因</h3> <p>iOS Safari 主动禁止非用户手势上下文中的自动键盘弹出。<code>autofocus属于页面加载行为，没有用户点击、触摸等触发源，因此被策略性跳过——这不是 bug，是设计如此。- 首页写
<input autofocus>→ 光标不动，键盘不弹 - 模态框
show()后调input.focus()，若不在click或touchstart回调里 → 依然失败 - 哪怕聚焦成功，软键盘可能遮挡输入框，尤其在
position: fixed或 viewport 缩放后
真正可靠的兼容方案：focus() + 三重校验
删掉所有
autofocus属性，统一用 JS 控制。但不能裸调focus()，必须确保三个条件同时成立：- 已挂载：
input.isConnected为true，或input.offsetParent !== null - 可见：
getComputedStyle(input).display !== 'none'且visibility !== 'hidden' - 可聚焦：
input.tabIndex >= 0，且未disabled、未被inert阻断
推荐延迟一帧执行：
requestAnimationFrame(() => input.focus())，避开 CSS transition 未完成或渲染未就绪的时机。若涉及用户手势（如点击按钮打开弹窗），务必把focus()放在该事件回调内同步执行，否则 iOS Safari 会拒绝。真正麻烦的从来不是让输入框获得焦点，而是确保它聚焦后不会被其他逻辑覆盖、不会逃逸到弹窗外、不会破坏屏幕阅读器的焦点流——这些细节不校验，上线后第一轮无障碍测试就会卡住。
- 首页写
