autofocus在spa多弹窗中失效或乱跳，因其仅在页面首次加载时触发且不感知组件卸载/重挂载；多个弹窗dom共存时浏览器可能随机聚焦首个含autofocus元素。
autofocus 属性在 SPA 多弹窗中为何失效或乱跳
因为 autofocus 是 HTML 原生行为，浏览器只在页面首次加载时触发一次，且不感知组件卸载/重挂载。单页应用（如 React/Vue）里弹窗反复 mount/unmount，autofocus 会被忽略——尤其当多个弹窗 DOM 同时存在（哪怕视觉上只显示一个），浏览器可能随机聚焦第一个含 autofocus 的元素，或干脆不聚焦。
React 中用 useEffect + ref 替代 autofocus
直接删掉所有 autofocus 属性，改用 JS 控制焦点更可靠：
function Modal({ isOpen, children }) {
const inputRef = useRef(null);
useEffect(() => {
if (isOpen && inputRef.current) {
inputRef.current.focus();
// 可选：防止 Safari 焦点后滚动到顶部
inputRef.current.scrollIntoView({ block: 'nearest' });
}
}, [isOpen]);
return isOpen ? (
<div>
<input ref="{inputRef}">
{children}
</div>
) : null;
}
- 必须依赖
isOpen状态做条件判断，否则组件重渲染时会反复聚焦 -
useEffect的依赖数组不能漏掉isOpen，否则弹窗打开时可能错过聚焦时机 - 如果弹窗内容异步加载（如带
await的数据请求），需等 DOM 渲染完成再 focus，可用setTimeout(() => ref.current?.focus(), 0)或requestAnimationFrame
多个弹窗共存时如何避免焦点抢夺
关键不是“谁先渲染”，而是“谁当前应获得焦点”。建议为每个弹窗维护独立的焦点控制逻辑，并加一层优先级判断：
- 给最上层弹窗加
data-modal-layer="top"属性，JS 只对[data-modal-layer="top"]内的首个可聚焦元素调用focus() - 关闭弹窗时，显式调用
document.activeElement?.blur()，防止焦点残留导致键盘事件错位 - 监听
keydown事件时，检查event.target是否在当前激活弹窗内，否则event.preventDefault()阻断跨弹窗输入
Vue 中使用 v-focus 指令的注意事项
Vue 3 的自定义指令比 autofocus 更可控，但要注意：
const vFocus = {
mounted(el) {
// 不要直接 el.focus() —— 此时 DOM 可能未就绪
nextTick(() => {
if (el.matches(':focusable')) el.focus();
});
}
};
-
:focusable是伪类，需配合el.tabIndex !== -1或el.hasAttribute('contenteditable')手动判断可聚焦性 - 指令绑定的元素若被
v-if移除又重建，mounted会再次触发，必须确保不会和父组件的焦点逻辑冲突 - 多个
v-focus元素同时存在时，建议配合v-show而非v-if，避免 DOM 完全销毁后指令重复注册
document.activeElement，导致按 Tab 键时焦点跳进已隐藏的旧弹窗里。这个细节不报错，但会让用户感觉“键盘失灵”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
