autofocus属性仅在html初始解析时生效，动态插入的dom中无效；必须手动调用focus()并确保元素已挂载、可见且可交互，推荐用requestanimationframe延迟执行。
autofocus 在动态插入的 DOM 中根本不会触发
HTML 的 autofocus 属性只在元素初始渲染（即页面加载或元素随 HTML 一起解析）时生效；通过 JS 动态创建、innerHTML 插入、或 Vue/React 等框架挂载的弹窗，autofocus 属性会被忽略——浏览器压根不扫描它。
这不是 bug，是规范行为。所以别指望加了 autofocus 就能自动聚焦，尤其在 Modal、Dialog、Toast 等运行时插入的场景里。
手动聚焦必须等元素真实挂载到 DOM 且可交互
直接在插入节点后立刻调用 focus() 很可能失败，因为：元素可能还没完成样式计算、被 CSS display: none 或 visibility: hidden 遮挡、或父容器未显示导致 focus 被拦截。
实操建议：
- 确保目标
<input>已插入文档流（document.body.appendChild(el)或类似操作已完成） - 确认其
offsetParent !== null（表示有可见的定位父容器） - 推荐用
requestAnimationFrame延迟到下一帧，让浏览器完成布局：
modalEl.appendChild(inputEl);
requestAnimationFrame(() => {
if (inputEl.offsetParent !== null) {
inputEl.focus();
}
});
更稳妥的做法是监听弹窗的「显示完成」时机，比如监听 transitionend（CSS 动画结束）、或使用 setTimeout 延迟 0ms（利用任务队列），但 requestAnimationFrame 是平衡及时性与可靠性的首选。
focus() 失败的常见原因和绕过方式
即使元素已挂载，focus() 仍可能静默失败，典型表现是光标没出现、键盘输入无响应。常见原因：
- 元素被
tabindex="-1"或disabled禁用 → 检查并移除或设为tabindex="0" - 父级有
inert属性（如某些 Modal 库启用的屏蔽层）→ 需临时移除或聚焦前确保无障碍上下文允许 - 焦点被其他元素抢走（例如弹窗打开时旧焦点元素仍存在）→ 在聚焦前显式
document.activeElement.blur() - 移动端 Safari 对非用户手势触发的
focus()限制极严 → 必须绑定在click/touchend等用户事件回调内，不能靠定时器或异步逻辑
针对移动端兼容，可结合用户手势兜底：
let hasUserInteraction = false;
document.addEventListener('click', () => { hasUserInteraction = true; }, { once: true });
document.addEventListener('touchend', () => { hasUserInteraction = true; }, { once: true });
// 弹窗打开后
if (hasUserInteraction) {
inputEl.focus();
} else {
// 提示用户点击任意处再聚焦，或等待下一次合法手势
}
封装一个可靠的 focusInput 工具函数
把上述判断收拢成可复用逻辑，避免每次写一堆条件：
function focusInput(el, options = {}) {
const { delay = 'raf', preventScroll = true } = options;
if (!el || !el.focus || el === document.activeElement) return;
const tryFocus = () => {
if (el.offsetParent === null) return;
try {
el.focus({ preventScroll });
} catch (e) {
// ignore
}
};
if (delay === 'raf') {
requestAnimationFrame(tryFocus);
} else if (delay === 'nextTick') {
setTimeout(tryFocus, 0);
} else {
tryFocus();
}
}
// 使用
focusInput(document.querySelector('#search-input'));
注意：现代 focus() 支持 { preventScroll: true } 选项，避免聚焦时意外滚动页面顶部，这个细节容易被忽略，但对用户体验很关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
