autofocus在动态弹窗中失效是因为它仅在html初始解析时生效，而弹窗dom是js运行时插入的，此时解析已结束；必须用element.focus()手动聚焦，并确保元素已挂载、可见、未禁用且调用处于用户手势上下文。
autofocus 属性在动态弹窗和表单加载时基本不起作用，必须改用 element.focus() 手动聚焦，并确保元素已挂载、可见、未被禁用、且调用时机处于用户手势上下文（尤其 iOS Safari）。
autofocus 为什么在动态弹窗里完全失效
它不是 JS 可触发的行为，而是浏览器在 HTML 初始解析阶段扫描源码时的一次性动作。弹窗 DOM 是 JS 运行时插入的（比如 modalEl.appendChild(form) 或 Vue 的 v-if），此时解析早已结束，autofocus 属性只是个静态字符串，不会被重新识别。
常见误判现象包括：
- 控制台没报错，但光标不动 → 不是 bug，是规范行为
- Vue 组件里写
<input autofocus>，SSR 渲染后 hydration 完成才挂载 → 错过解析窗口 - 弹窗 CSS 动画刚结束就调
focus()，但元素仍处于opacity: 0或visibility: hidden状态 → 浏览器拒绝聚焦
动态弹窗中安全调用 focus() 的关键条件
不能只写 input.focus()，得先校验三件事：是否挂载、是否可见、是否未被抢占焦点。
- 确保 DOM 已插入且渲染完成：推荐监听弹窗框架的显示事件（如 Bootstrap 的
shown.bs.modal、或自定义的modal:show），而非仅靠setTimeout(() => ..., 0) - 检查可见性：避开
display: none、visibility: hidden、inert、tabindex="-1"等阻止聚焦的状态 - 防焦点冲突：加判断
if (input && document.activeElement !== input)，避免覆盖用户刚点过的其他输入框 - iOS Safari 必须绑定在用户手势后：比如点击“登录”按钮的回调里立即调
input.focus()，否则软键盘不弹
表单重置（form.reset()）后如何恢复焦点
form.reset() 会清空值并移除当前焦点，但不会重新触发 autofocus 逻辑——哪怕那个 input 原本就带该属性。
- 必须手动补焦：在
reset()后立刻调用usernameInput.focus() - 若需防止页面滚动到输入框位置，可用
input.focus({ preventScroll: true })（Chrome/Edge/Firefox 支持，Safari 15.4+ 支持） - 不要依赖
focus事件监听来捕获autofocus行为：它不派发事件；只有手动.focus()才保证触发
SPA 框架中的典型写法（React / Vue）
核心原则：放弃 HTML 里的 autofocus，统一用框架生命周期 + ref 聚焦。
- React：
useEffect(() => { ref.current?.focus(); }, [])，且务必包裹if (typeof window !== 'undefined')防 SSR 报错 - Vue：
onMounted(() => { inputRef.value?.focus(); })，确认v-if已为true或组件已实际渲染 - 注意：不要在
onBlur回调里立即focus()，可能被浏览器拦截或引发循环
真正容易被忽略的是：iOS Safari 对非手势上下文的聚焦调用，既不报错也不弹键盘，只静默失败；而很多开发者直到真机测试才发现问题。别等上线后被反馈“登录框打不开键盘”，从第一次写弹窗逻辑起，就把 focus() 绑定在 click/touchstart 里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
