autofocus仅在html初始解析时生效，vue/react异步组件、模态框切换、innerhtml插入、ios safari及disabled/hidden元素等场景均会静默失效；须手动focus()并校验dom就绪、可见性、可聚焦性、用户手势上下文与滚动行为。
直接用 autofocus 属性在 HTML 里写，90% 的场景下它根本不会聚焦——不是你代码错了，是浏览器压根没执行它。
autofocus 在哪些地方会静默失效
它只在页面初始 HTML 解析阶段起一次作用，之后任何动态行为都与它无关：
- Vue/React 组件中写
<input autofocus>→ hydration 完成后 DOM 已存在，解析时机早已过去 - 模态框初始
display: none，JS 切成block后再显示 → 解析时不可见，属性被跳过 -
document.body.innerHTML = '<input autofocus>'→ 浏览器不重新解析字符串，属性纯属摆设 - iOS Safari 下无论怎么写，
autofocus都被策略性忽略（防止非用户手势触发键盘） - 元素被
disabled、readonly、tabindex="-1"或父级有inert→ 不参与自动聚焦流程
focus() 方法调用失败的典型原因
手动调用 .focus() 看似可控，但失败往往是因为时机或状态不对：
- 脚本放在
里直接执行 →document.querySelector('input')返回null - 在 Vue
onBeforeMount或 ReactuseEffect空依赖数组里调用 → 框架尚未完成挂载，ref 还是null - 聚焦前元素不在视口内，且未配合
.scrollIntoView({ block: 'nearest' })→ 聚焦成功但被遮挡，尤其在 fixed 定位区域 - 移动端非用户手势上下文调用（比如 Ajax 回调后立刻
input.focus()）→ 键盘不弹出，光标也不亮 - 多个
.focus()调用竞争，或和autofocus混用 → 后者可能先触发又立刻被 JS 覆盖，行为不可预测
真正可靠的聚焦时机与写法
关键不是“怎么写”，而是“什么时候写”和“写之前确认什么”：
- 原生 JS：监听
DOMContentLoaded，再检查document.activeElement !== input，避免覆盖用户当前输入 - React：用
useEffect(() => { ref.current?.focus() }, [])，加if (typeof window !== 'undefined')防 SSR 报错 - Vue 3：在
onMounted中调用inputRef.value?.focus()，确保v-if已为true - 移动端兜底：绑定一次
click或touchstart到 body，回调中立即input.focus()（iOS 15+ 可配合readonly临时 hack） - 表单重置后：监听
form.reset事件，在回调里用setTimeout(() => input.focus(), 0)恢复焦点
容易被忽略的兼容性细节
很多问题不是逻辑错，而是没校验底层约束：
-
<select></select>在 Firefox 和旧 Safari 上不支持autofocus，错误信息是autofocus is not supported on <select></select> -
<input type="file">、<input type="checkbox">、<input type="hidden">加了autofocus也无效，规范不支持 - 同一页面多个
autofocus元素 → 只有第一个按源码顺序生效，其余静默丢弃（不是 bug，是标准） - 使用
form.reset()后，焦点必然丢失，必须手动恢复；第三方表单库（如 react-hook-form）需查其 reset 钩子文档 - 无障碍场景下，
autofocus会被屏幕阅读器识别，但聚焦密码框或非首屏元素可能打断用户流，需谨慎选择目标
最麻烦的从来不是“怎么让输入框聚焦”，而是“怎么确认此刻聚焦既安全、又必要、还不干扰用户”。DOM 就绪、可见性、可聚焦性、用户意图、移动端策略——五个条件缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
