不一定。autofocus仅在页面加载时对首个可聚焦、未禁用、未隐藏的input/textarea生效，多实例仅首例处理，spa中常失效，需js手动focus()并配合用户手势触发键盘。
autofocus 属性是否在页面加载时一定生效？
不一定。浏览器只允许页面中**最多一个** input 或 textarea 元素使用 autofocus，且该元素必须是**可聚焦、未被禁用、未被隐藏（display: none 或 visibility: hidden）** 的。如果多个元素都写了 autofocus，只有第一个会被处理；如果元素在 DOM 加载完成前被移除或动态隐藏，焦点不会落到它身上。
常见错误现象：autofocus 写了但没反应，往往是因为：
- 页面有多个
autofocus，浏览器忽略后续的 - 输入框被 CSS 隐藏（比如父容器
display: none），即使 HTML 中存在也无法聚焦 - 输入框被
disabled或readonly（readonly不影响聚焦，但disabled会彻底禁用聚焦） - 页面通过 JS 动态插入该输入框，而
autofocus是静态属性，不触发 DOM 插入后的自动聚焦逻辑
如何确保 autofocus 在单页应用（SPA）中可靠触发？
在 React/Vue 等框架中，autofocus 往往失效——因为组件挂载时 DOM 可能尚未就绪，或框架复用节点导致属性丢失。此时应改用 JS 主动调用 focus()。
实操建议：
- 在组件挂载后（如 React 的
useEffect(() => { inputRef.current?.focus(); }, [])）手动聚焦 - 避免在条件渲染块中直接写
autofocus，比如{show && <input autofocus>}—— 这个属性不会在显示时“补触发” - 如果依赖路由切换后聚焦，需监听路由变化事件，并在新视图稳定后调用
input.focus()，而非依赖初始 HTML 属性 - 注意移动端 Safari 对
autofocus支持极弱（尤其在非用户手势触发的上下文中），JSfocus()也常被拦截，需配合setTimeout延迟或等待用户第一次触摸后再启用
autofocus 和 JavaScript focus() 的关键区别
autofocus 是声明式、仅限初始加载的一次性行为；focus() 是命令式、可随时调用、可重试、可加判断的控制方式。
它们的影响差异明显：
-
autofocus触发时，浏览器可能不滚动到该元素（尤其当它不在可视区），而input.focus({ preventScroll: false })可显式控制是否滚动 -
autofocus无法捕获失败（比如元素不可聚焦时静默忽略），focus()调用后可通过document.activeElement === input检查是否成功 -
autofocus不会触发focus事件（因为不是用户或脚本主动触发），而focus()会，可用于联动逻辑 - 某些屏幕阅读器对
autofocus的支持不稳定，而显式focus()更易被辅助技术识别
移动端聚焦键盘弹出失败的常见原因和绕过方式
在 iOS Safari 和部分 Android 浏览器中，即使 autofocus 或 focus() 执行成功，软键盘也可能不弹出——这是浏览器的安全策略：键盘只响应**明确的用户手势**（如 click/tap）。
解决思路很务实：
- 不要在页面加载后立即聚焦，而是等用户首次点击/触摸页面某区域（哪怕是个透明 overlay）后再调用
input.focus() - 把输入框放在显眼位置，用文字提示“点击此处开始输入”，绑定
onclick聚焦，而不是靠自动行为 - 避免在
DOMContentLoaded或window.onload里直接调用focus()—— 此时无用户激活上下文，iOS 会拒绝弹键盘 - 可检测
document.hasFocus()或监听focusin判断是否已获得用户激活，再执行聚焦
真正麻烦的从来不是怎么写 autofocus，而是什么时候、以什么方式、在哪个上下文中让浏览器愿意为你弹出键盘。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
