autofocus在异步加载时必然失效，因它仅在html初始解析阶段生效；异步插入的元素即使含autofocus属性，浏览器也不会重新扫描。
HTML 表单在异步加载场景下，autofocus 属性完全无效，必须用 element.focus() 手动触发，且时机、条件、容错缺一不可。
为什么 autofocus 在异步加载时必然失效
它只在 HTML 初始解析阶段起作用，而异步加载（如 fetch 后 innerHTML 插入、Vue/React 动态组件挂载、AJAX 渲染表单）发生在 DOM 构建完成之后。浏览器不会重新扫描新插入的 autofocus 属性——哪怕它真实存在于元素上，也静默跳过。
- 常见现象：
<input autofocus>写在 Vue 的<template></template>里，但组件挂载后光标没动 - 模态框通过
fetch加载 HTML 片段再appendChild，输入框始终不聚焦 - 服务端返回带
autofocus的表单片段，客户端插入后焦点落在页面顶部旧输入框上（因它才是“第一个被解析”的）
手动 focus() 的正确调用时机
不能靠猜，必须等三件事同时满足：元素已挂载、可见、可聚焦。不同环境有对应安全钩子：
- 原生 JS：监听
DOMContentLoaded后再查元素；若元素是异步插入的，需在插入完成后立即调用（如insertAdjacentHTML后跟input.focus()） - React：
useEffect(() => ref.current?.focus(), [])—— 但要确保ref绑定的是最终渲染的元素，不是条件渲染前的空节点 - Vue：
onMounted(() => inputRef.value?.focus())，配合v-if时需加nextTick确保 DOM 更新完成 - jQuery UI / Bootstrap Modal：绑定在
shown.bs.modal事件回调里，而非show.bs.modal
focus() 失效的四个高频原因及应对
调了 .focus() 却没反应？大概率卡在这几个环节：
-
document.activeElement === input已是焦点 → 白调，应先判断：if (input && document.activeElement !== input) input.focus() - 元素被
display: none或visibility: hidden包裹 →getComputedStyle(input).display !== 'none'要为真才可聚焦 - 移动端（尤其 iOS Safari）拦截非用户手势触发的聚焦 → 必须包裹在点击、回车等事件中，例如按钮
onclick里调input.focus() - 软键盘弹出导致意外滚动 → 加参数避免：
input.focus({ preventScroll: true })（注意 Safari 15.4+ 才支持）
自动补全与焦点联动的实用逻辑
用户聚焦输入框时，常需同步触发建议列表展示或预填充（如电话号加 "+"）。这类逻辑不能和 autofocus 混用，而应统一走 focus 事件：
- 仅在
input.value === ""时自动填前缀：e.target.value = e.target.value || "+" - 聚焦空输入框时拉取全部选项（如城市选择器）：
if (!e.target.value) fetchAllOptions() - 避免重复请求：用
AbortController取消上一次未完成的 fetch - 表单重置后焦点丢失 →
form.addEventListener('reset', () => setTimeout(() => input.focus(), 0))（setTimeout是为了等重置完成）
真正麻烦的从来不是“怎么写 focus”，而是“什么时候能安全地写”——异步加载让 DOM 就绪状态变得碎片化，一个没检查 activeElement、没兜住 iOS 限制、没防住重置覆盖的 focus()，就等于没写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
