autofocus仅在页面首次加载且元素静态存在于初始HTML中时可靠；SPA路由切换、模态框、iOS Safari、动态渲染等场景必须手动调用focus()并确保在用户手势回调中执行。
HTML表单控件自动聚焦只有在「页面首次加载、元素静态存在、且用户意图明确」的极少数场景下才真正可靠；其余所有常见情况——SPA路由切换、模态框弹出、iOS Safari、动态渲染——都必须用 focus() 手动控制，否则大概率静默失败。
哪些场景下 autofocus 真的能用
它不是“自动聚焦开关”，而是浏览器在 HTML 解析阶段的一次性扫描行为。真正能靠它工作的场景非常有限：
-
autofocus只对初始 HTML 源码里就存在的元素生效，比如纯静态登录页：<input type="text" name="username" autofocus> - 元素必须是原生可聚焦类型：
<input type="text">、<textarea>、<select>（部分浏览器）、<button>（支持度差） - 元素不能被禁用（
disabled）、隐藏（display: none或visibility: hidden）、或包裹在不可见容器中 - 页面不能是 iOS Safari 直接打开的——它会无视
autofocus，哪怕你写了也白写
为什么 SPA 里写 autofocus 基本等于没写
Vue/React 组件模板里的 <input autofocus> 在 hydration 完成后 DOM 才挂载，浏览器早已完成 HTML 解析，autofocus 属性被当成普通属性忽略，不会触发任何聚焦动作。
- React 中
useEffect(() => { ref.current?.focus() }, [])是标准解法，但得加if (typeof window !== 'undefined')防 SSR 报错 - Vue 3 中
onMounted(() => inputRef.value?.focus())必须确保v-if已为true，否则inputRef.value是null - 原生 JS 动态插入：
el.innerHTML = '<input autofocus>'或document.body.appendChild(input)→autofocus完全不触发
移动端聚焦必须绑定用户手势
iOS Safari 明确禁止非用户手势上下文中的键盘弹出，这意味着：
立即学习“前端免费学习笔记（深入）”；
- 页面加载时调
input.focus()→ 光标可能聚焦，但软键盘不弹 - 模态框
show()后立即input.focus()→ 同样不弹键盘 - 正确做法：聚焦操作必须包裹在
click、touchstart或keydown回调内，例如：button.addEventListener('click', () => input.focus()) - 即使聚焦成功，若输入框位于
position: fixed区域或 viewport 缩放异常，软键盘仍可能遮挡内容
容易被忽略的关键校验点
直接调 focus() 不等于一定成功。以下检查缺一不可：
- 元素是否已挂载：
input && input.offsetParent !== null（比getComputedStyle更准，能识别visibility: hidden） - 是否未被禁用：
!input.hasAttribute('disabled') - 当前焦点是否已被占用：
document.activeElement !== input，避免覆盖用户正在输入的其他字段 - 是否在用户手势上下文中（尤其 iOS）：不在
click/touchstart回调里调用，等于白干
最常被低估的其实是「时机」和「上下文」——不是代码没写对，而是没等 DOM 真正可用、没确认元素可见、也没管用户有没有主动交互过。这些条件漏掉任何一个，focus() 就会静默失败，连错误都不报。
