autofocus仅在HTML初始解析时生效，且仅对特定可聚焦元素有效；动态插入、CSS隐藏、多元素共存或SPA路由切换均导致其失效，需用JavaScript手动focus并处理可见性、上下文等细节。
autofocus 属性在多数静态页面中能“开箱即用”，但真实项目里它大概率会失效——不是你写错了，而是浏览器压根没执行它。
autofocus 只在 HTML 初始解析时起作用
它不是监听器，也不是运行时逻辑，而是一次性标记：浏览器在首次构建 DOM 树时扫描到第一个带 autofocus 的可聚焦元素，就立即聚焦；之后任何动态插入、v-if 切换、display: none 显示、form.reset() 都不会触发它重新生效。
-
<input type="text" autofocus>放在<body>顶部且无 CSS 隐藏，才最可能成功 - 模态框里写
autofocus？只要初始display: none或visibility: hidden，该属性就被跳过 - React/Vue 组件中写
<input autofocus />，SSR 渲染后 DOM 已存在，错过解析时机 - 多个
autofocus元素共存？只有源码中第一个被 HTML 解析器读到的生效，其余静默忽略
哪些元素真正支持 autofocus
支持范围比直觉窄得多。它只对原生、可交互、未禁用、初始可见的表单控件有效：
- ✅ 稳定支持：
<input type="text">、<input type="email">、<input type="search">、<textarea>、<button> - ⚠️ 条件支持：
<select>在 Chrome/Edge 中可用，Firefox 和旧版 Safari 常静默忽略（错误提示：autofocus is not supported on <select>） - ❌ 完全无效：
<input type="hidden">、<input type="checkbox">、<input disabled>、<div autofocus>、<span autofocus>
移动端和 SPA 场景必须用 JavaScript focus()
iOS Safari 几乎总是忽略 autofocus，Vue/React 路由切换后新渲染的输入框也不会自动聚焦。可靠做法是等 DOM 挂载完成、元素可见、且用户尚未主动操作后再调用 .focus()：
立即学习“前端免费学习笔记（深入）”；
- 原生 JS：监听
DOMContentLoaded，再加一层if (document.activeElement !== inputEl)避免覆盖用户当前焦点 - React：用
useEffect(() => { inputRef.current?.focus() }, [])，并包裹if (typeof window !== 'undefined')防 SSR 报错 - Vue 3：在
onMounted中调用inputRef.value?.focus()，确保v-if已为 true - 更稳妥的 iOS 方案：绑定一次
click或touchstart到body，回调中立即调用input.focus()
focus() 后常被忽略的关键细节
调用 .focus() 不等于光标一定出现在可视区域或可输入状态：
- 元素被
overflow: hidden父容器裁剪？加inputEl.scrollIntoView({ block: 'nearest' })确保可见 - 输入框被
tabindex="-1"或inert属性阻挡？需先移除或临时修改 - 表单验证失败后聚焦首个错误字段？别只调
.focus()，还要检查input.checkValidity() === false再操作 - 软键盘在 iOS 上不弹出？仅靠
.focus()不够，需配合用户手势上下文（如点击后立刻 focus）
真正难的不是让光标出现，而是让它在正确的时间、正确的上下文、对正确的用户起作用——尤其是当页面有动画、异步加载、多层遮罩或辅助技术介入时，autofocus 和 .focus() 都只是起点，不是终点。
