autofocus属性仅在HTML初始解析时对首个符合条件元素生效，之后完全失效；其失效主因包括DOM挂载延迟、CSS隐藏、disabled属性、多autofocus冲突及iOS Safari禁用；可靠方案是用JavaScript的focus()配合可见性、焦点状态等校验。
autofocus 属性在绝大多数实际场景中都不该被依赖——它只在 HTML 初始解析时对第一个符合条件的元素起一次作用，之后完全失效。静态页面且无 CSS 隐藏、无框架、非 iOS 环境下才可能“看起来有效”。
autofocus 为什么写了却没反应
不是代码写错了，是浏览器根本没处理它。常见失效原因包括：
-
autofocus出现在 Vue/React 组件里（比如{show && <input autofocus>}），DOM 挂载时机晚于 HTML 解析，属性存在但已错过时机 - 输入框被包裹在
display: none或visibility: hidden的父容器中，浏览器直接跳过该元素 - 元素带
disabled属性，或类型不支持（如<input type="checkbox">、<input type="hidden">） - 页面中有多个
autofocus，只有 DOM 中第一个被解析到的生效，其余静默忽略 - iOS Safari 主动禁用非用户手势触发的自动聚焦，防止软键盘意外弹出——首页加了也大概率不弹键盘
哪些元素和写法真正有效
必须同时满足：可聚焦 + 可交互 + 初始可见 + 未禁用。有效组合如下：
- ✅ 安全可用：
<input type="text" autofocus>、<input type="search" autofocus>、<textarea autofocus> - ⚠️ 有条件支持：
<button autofocus>（Chrome/Firefox 行为一致，Safari 偶尔跳过）、<select autofocus>（Firefox 和旧版 Safari 明确不支持） - ❌ 完全无效：
<input type="file" autofocus>、<input disabled autofocus>、<div tabindex="0" autofocus> - 写法上，
autofocus是布尔属性，应不赋值：<input autofocus>✅；<input autofocus="true">❌
移动端和 SPA 中必须用 JavaScript 手动 focus()
放弃 autofocus，改用 .focus() 并校验关键条件才是可靠路径：
立即学习“前端免费学习笔记（深入）”；
- 原生 JS：监听
DOMContentLoaded后检查元素存在、可见、未被占用焦点：if (input && input.offsetParent !== null && document.activeElement !== input) input.focus() - React：用
useEffect(() => { ref.current?.focus() }, [])，加if (typeof window !== 'undefined')防 SSR 报错 - Vue 3：在
onMounted中调用inputRef.value?.focus()，确保v-if已为 true - iOS 特殊兜底：绑定一次
click或touchstart到 body 或按钮，回调中立即调用input.focus()
focus() 调用前容易被忽略的三个校验点
哪怕 DOM 已挂载，.focus() 也可能失败或造成体验问题：
- 元素是否真实可见？检查
offsetParent !== null或getComputedStyle(input).display !== 'none' - 是否已被用户主动聚焦？比较
document.activeElement === input，避免覆盖当前输入 - 是否需要防滚动？
input.focus({ preventScroll: true })可避免聚焦后页面跳到顶部，而autofocus不支持该选项
最常被绕过的其实是“用户是否已经动手操作了”——自动聚焦不该打断正在阅读或点击的用户，尤其在模态框或非搜索页首屏出现时，手动控制比声明式属性更尊重上下文。
