autofocus仅在HTML首次解析时对首个可见可聚焦的原生表单控件生效，不响应动态插入、CSS隐藏、多实例或SPA路由切换；移动端及iOS常静默忽略，需JS手动focus()并注意时机与兼容性。
autofocus 属性只在页面首次 HTML 解析时生效，不是“写上就聚焦”的魔法开关。绝大多数“没反应”的情况，是因为浏览器压根没处理它——不是你代码错了，是它根本没机会运行。
autofocus 只对特定元素和状态有效
它只作用于原生可聚焦、可输入的表单控件，且要求元素初始可见、未被禁用：
-
<input type="text">、<input type="search">、<input type="email">、<textarea>✅ 稳定支持 -
<select>⚠️ Chrome/Edge 支持，Firefox 和旧版 Safari 可能忽略（错误信息：autofocus is not supported on <select>） -
<input type="hidden">、<input type="checkbox">、<input disabled>、<div autofocus>❌ 静默失效，不报错 - 元素包裹在
display: none或visibility: hidden容器中 → 聚焦被跳过 - 父级有
inert属性或自身tabindex="-1"→ 不参与自动聚焦流程
多个 autofocus 元素或动态插入必然失效
HTML 规范明确：同一文档中，只有第一个被解析到的 autofocus 元素会生效，其余全部忽略。这不是 bug，是标准行为：
- 源码顺序决定“第一个”，不是渲染顺序，也不是 JS 挂载顺序
-
document.body.innerHTML = '<input autofocus>'→ 新增 DOM 不触发重新解析，属性存在但无效果 - Vue/React 组件里写
<input autofocus />→ SSR 渲染或 hydration 后 DOM 已存在，错过解析时机 - 模态框初始
display: none，之后 JS 切换为block→ 解析时不可见，autofocus 被丢弃 -
form.reset()后不会恢复 autofocus，必须手动调用.focus()
移动端和 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 事件，也不保证键盘弹出
它只是让浏览器把焦点设过去，不派发 focus 事件（旧版 Safari 除外），更不会强制唤起软键盘：
- 别依赖
input.addEventListener('focus', handler)捕获 autofocus 行为 → 大概率收不到 - 若需监听，必须手动调用
el.focus()，它才会触发focus事件 -
.focus({ preventScroll: true })可防止页面滚动，autofocus没这个能力 - 移动端过早弹出键盘可能遮挡内容，尤其在模态框中，建议改用用户点击后再聚焦
真正容易被忽略的点是：autofocus 是一个一次性、声明式、与 DOM 解析强耦合的行为，它不响应后续任何变化。现代前端项目里，把它当兜底方案可以，但指望它在 SPA、模态框、iOS 上稳定工作，等于放弃控制权。
