autofocus是布尔属性，仅在页面初始加载时对首个可聚焦的非禁用元素生效，动态插入或条件渲染元素需用JavaScript手动focus。
直接在目标 <input>、<textarea> 或 <button> 元素上添加 autofocus 属性即可，浏览器会在页面加载完成、DOM 解析就绪后自动将焦点设到该元素上。
基础写法与适用范围
autofocus 是布尔属性，无需赋值，写上即生效：
<input type="text" name="search" autofocus><textarea autofocus></textarea><button autofocus>提交</button>
它只对可聚焦的表单控件有效，比如 text、email、password、search、tel、url、number 等；hidden、file、checkbox、range 等类型不支持或行为不可靠。
必须注意的关键限制
autofocus 不是“万能开关”，实际生效受多个硬性条件约束：
- 一个页面中只能有一个元素使用
autofocus，若多个存在，仅第一个被 HTML 解析器读到的生效 - 目标元素必须未被禁用（不能有
disabled），且不能处于隐藏状态（display: none或visibility: hidden的父容器会阻止聚焦） - 该属性仅在页面初始 HTML 加载解析阶段起作用，动态插入的元素（如 JS 创建、Vue/React 渲染、
innerHTML注入）即使带autofocus也不会触发 - iOS Safari 基本忽略 autofocus，尤其在非用户手势触发的上下文中（如纯页面加载），需 JS 补位
常见失效场景及应对方式
写了 autofocus 却没反应？大概率掉进了这些坑：
- 登录弹窗是 JS 动态显示的 → 改用
element.focus()，在模态框显示完成后调用 - 输入框被包裹在
v-if或*ngIf条件渲染块里 → autofocus 不会“补触发”，应配合 ref + 生命周期钩子手动聚焦 - 页面走的是 SPA 路由切换 → 切换后新组件挂载时需用
useEffect(() => { inputRef.current?.focus() }, [])（React）或onMounted(() => input.value?.focus())（Vue） - 需要兼容 iOS 或确保语音识别启动 → autofocus 仅负责光标定位，语音功能需额外调用 Web Speech API，并依赖用户已授予权限
autofocus 和 JS focus() 的本质区别
autofocus 是声明式、一次性、由浏览器控制的加载行为；focus() 是命令式、可编程、可判断、可重试的运行时操作。
- autofocus 不会触发
focus事件（因发生在事件循环前），focus() 会 - autofocus 无法在元素不可见时“强行生效”，focus() 同样失败但可加延迟或等待可见后再调用
- 当需要根据 URL 参数、用户状态或权限决定是否聚焦时，必须用 JS 控制，autofocus 无条件执行
