autofocus仅在html初始解析时生效，动态插入、隐藏元素、多autofocus、ios safari限制及js干扰均会导致失效；应优先用js手动focus并确保dom挂载后执行。
autofocus 属性在页面加载时没生效？检查是否被 JS 干扰
autofocus 属性只在页面初始加载时起作用，且仅对第一个带有 autofocus 的 <input> 生效。如果页面里有 JS 动态插入或重写 DOM（比如 Vue/React 渲染后挂载、innerHTML 替换父容器），原生 autofocus 会被忽略——因为浏览器只在解析 HTML 时识别它，不响应后续 DOM 变更。
常见误用场景：
- 在
<div id="app"></div>中用 Vue 渲染表单，autofocus写在模板里但无效 - 用
document.body.innerHTML = '...'替换整个内容后，autofocus不触发 - 多个
<input autofocus>同时存在，只有第一个被聚焦
React/Vue 等框架中怎么让 input 自动聚焦？用 ref + useEffect / mounted
框架接管了 DOM 生命周期，必须手动调用 .focus()。关键点是：不能在组件渲染完成前调用，也不能在 SSR 渲染阶段执行（会报错）。
React 示例（函数组件）：
function LoginForm() {
const inputRef = useRef(null);
useEffect(() => {
if (inputRef.current) {
inputRef.current.focus();
}
}, []);
return <input ref="{inputRef}" type="text">;
}
Vue 3 Composition API 示例：
const inputRef = ref(null);
onMounted(() => {
if (inputRef.value) {
inputRef.value.focus();
}
});
注意：
-
useEffect或onMounted是必须的，不能直接在 render 函数里调.focus() - 服务端渲染（SSR）环境下，需加
if (typeof window !== 'undefined')判断，否则ref.current为null或报错 - 若 input 被
v-if或display: none控制显隐，确保聚焦前已真实挂载且可见
autofocus 在 iOS Safari 和部分安卓 WebView 中表现异常？别依赖它做关键交互
iOS Safari 默认禁止自动聚焦（尤其是非用户手势触发的 focus），防止键盘意外弹出影响体验；某些安卓 WebView（如微信内置）也会拦截 autofocus 或要求用户首次点击后才允许聚焦输入框。
这意味着：
- 登录页想“一进来就输账号”？
autofocus在 iOS 上大概率静默失败 - 表单嵌在 modal 或 tab 切换后显示，即使加了
autofocus，iOS 也不会聚焦 - 无障碍访问（VoiceOver）下，
autofocus可能跳过其他焦点元素，影响导航顺序
稳妥做法是：保留 autofocus 作为降级 fallback，同时在 JS 中补一手 .focus()，并监听 focusin 确认是否真正获得焦点。
用 autofocus 还是 JS focus？看场景选，别混用导致 focus 被覆盖
两者本质不同：autofocus 是 HTML 解析时的声明式行为，JS .focus() 是命令式操作。如果同时使用，JS 调用可能覆盖或干扰原生行为，尤其在快速连续触发时。
建议策略：
- 纯静态页面、无 JS 逻辑 → 直接用
<input autofocus>，简单可靠 - 有动态展示逻辑（如弹窗、tab 切换）→ 忽略
autofocus，统一用 JS 控制，配合setTimeout或requestAnimationFrame延迟确保 DOM 就绪 - 需要兼容旧版 IE（
autofocus不支持）→ 必须用 JS fallback，IE8–10 需用document.getElementById(...).focus()
特别注意：Chrome 120+ 对后台标签页限制了自动聚焦，即使页面在前台加载，若之前被切换到后台再切回，.focus() 可能被静默拒绝——这时候得靠用户第一次点击来“解锁”输入能力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
