autofocus仅在HTML初始解析时生效一次，非实时响应；SPA、模态框、iOS Safari等场景必然失效，须用JS手动focus()补位，且仅对text/email/textarea/button等原生可聚焦元素有效。
autofocus 属性只在 HTML 初始解析时生效一次，写上不等于聚焦成功；多数实际场景（SPA、模态框、iOS）它根本不起作用，必须用 element.focus() 补位。
autofocus 只对特定元素和状态有效
它不是通用“自动获得焦点”的开关，而是浏览器对符合硬性条件的少数元素的一次性处理：
-
<input type="text">、<input type="email">、<textarea>、<button>✅ 稳定支持 -
<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容器内，autofocus 被跳过
多个 autofocus 元素不会报错，但只有第一个被解析的生效
HTML 规范明确要求浏览器只响应文档中**第一个被解析到**的 autofocus 属性，其余全部忽略。这不是 bug，是标准行为：
- 源码顺序决定“第一个”，不是渲染顺序、CSS 显示顺序，也不是 JS 挂载顺序
- 模态框 HTML 在页面底部写了
autofocus，但页面顶部已有<input autofocus>→ 焦点永远落在顶部那个 - 服务端渲染 + 客户端 hydration 后又动态插入一个
autofocus输入框 → 客户端插入的不会触发，且可能干扰首次解析逻辑 - 密码管理器、翻译插件等扩展可能在页面加载后立即抢走焦点 → 看起来像 autofocus 失效，其实它已执行过
SPA 和动态插入场景下 autofocus 必然失效
因为它是 HTML 解析阶段的行为，而 SPA 的组件、模态框、表单都是 JS 运行时挂载的，浏览器早已完成解析：
立即学习“前端免费学习笔记（深入）”；
- Vue/React 组件里写
<input autofocus>→ SSR 渲染或 hydration 后 DOM 已存在，autofocus 被跳过 -
el.innerHTML = '<input autofocus>'或document.body.appendChild(input)→ 新增元素不触发重新解析，autofocus 属性存在但无效果 - 路由跳转后新页面的表单有
autofocus→ 浏览器不会二次触发，必须手动调用input.focus() - 正确时机示例：
React：useEffect(() => ref.current?.focus(), [])
Vue：onMounted(() => inputRef.value?.focus())
原生 JS：modalEl.addEventListener('shown', () => input.focus())
iOS Safari 中 autofocus 基本不可靠
Apple 主动限制非用户手势上下文中的自动聚焦，防止软键盘意外弹出遮挡内容。这不是兼容性问题，是平台策略：
- 首页
<input autofocus>→ iOS 用户打开页面，键盘大概率不弹出 - 模态框通过 JS show 后直接
input.focus()→ 若未包裹在用户事件回调（如onclick）中，仍可能失败 - iframe 内嵌页面、PWA 启动页、从后台标签页切回 → autofocus 静默忽略
- 可靠做法：绑定一次点击/触摸后调用
focus()，例如：<button onclick="document.getElementById('search').focus()">开始搜索</button>
真正容易被忽略的是：autofocus 不是“保证光标出现在输入框”，而是“告诉浏览器：如果此时一切条件都满足，请在解析完 HTML 后尝试聚焦”。一旦涉及动态、移动端、多焦点竞争或辅助技术，它就退居为一个可选提示，而非控制手段。
