autofocus在vue/react动态组件中无效，因其仅在html解析时生效，而框架渲染是js运行时插入dom，此时已过期；需用focus()配合正确时机（如nexttick、useeffect+ref、requestanimationframe）及可见性、用户手势等条件。
autofocus在Vue/React动态组件里为什么不起作用
它根本不是运行时机制，而是浏览器在HTML字符串解析成DOM树那一瞬间扫一眼、执行一次就结束的动作。Vue的<input autofocus>写在<template></template>里，实际是JS渲染后才插入DOM，此时autofocus早已“过期”。React同理——JSX生成的元素挂载完成，autofocus属性只是个静态字符串，浏览器不会再回头检查。
常见现象：document.activeElement始终是body或旧输入框；控制台没报错，但光标就是不动；服务端返回带autofocus的HTML片段，客户端用innerHTML塞进去，属性白写了。
- autofocus只认初始HTML流，不响应
appendChild()、insertAdjacentHTML()、框架re-render - Vue中
v-if切换后重新挂载，autofocus无效；React中useState触发重渲染，autofocus照样失效 - 即使手动
el.setAttribute('autofocus', '')，对已挂载元素也完全无反应
focus()调用时机不对会导致什么问题
不是“调了就完事”，而是必须等元素真实存在于DOM、可见、且未被禁用。早一秒（还没挂载）或晚一秒（被其他逻辑覆盖），都会失败。
原生JS里直接input.focus()大概率白干；React中useEffect(() => ref.current?.focus(), [])若ref绑定的是条件渲染前的空节点，ref.current就是null；Vue中onMounted配合v-if时，若没加nextTick，DOM可能还没更新完毕。
- 推荐统一用
requestAnimationFrame(() => el.focus())——比setTimeout(() => ..., 0)更可靠，避免和原生autofocus冲突抖动 - 模态框场景下，Bootstrap要等
shown.bs.modal事件，不能用show.bs.modal - SPA路由切换后聚焦，需监听
popstate或框架路由afterEach钩子，而非仅靠挂载生命周期
focus()调用后没反应的四个硬性条件检查点
光写el.focus()远远不够。浏览器会静默拒绝，且不抛错，你只能靠排查。
document.activeElement === el已是焦点 → 白调，应先判断：if (el && document.activeElement !== el) el.focus()
元素被display: none或visibility: hidden包裹 → getComputedStyle(el).display !== 'none'必须为真
iOS Safari拦截非用户手势触发的聚焦 → 必须裹在点击、回车等事件里，例如按钮onclick里调input.focus()
软键盘弹出导致意外滚动 → 加参数避免：input.focus({ preventScroll: true })（注意Safari 15.4+才支持）
- 移动端尤其要注意：自动聚焦必须由用户操作触发，否则iOS直接忽略
- 元素父级有
inert或tabindex="-1"也会阻断聚焦能力 -
input类型要是text、email等可交互类型，type="hidden"或disabled时.focus()无效但不报错
异步加载表单里的焦点与自动补全联动怎么写才安全
别把autofocus和focus事件混着用。用户手动聚焦和JS自动聚焦触发的逻辑应该一致，否则补全、预填、建议列表展示会错乱。
正确做法是：所有聚焦动作统一走input.addEventListener('focus', handler)，而不是在.focus()调用后立刻塞值或拉数据。
- 空输入框聚焦时自动填前缀：
if (!e.target.value) e.target.value = '+' - 聚焦后拉取全部选项（如城市选择器）：
if (!e.target.value) fetchAllOptions() - 避免在
blur回调里立即focus()，容易被浏览器拦截或引发循环 - 如果表单有校验失败重置焦点的需求，确保
focus()调用前该元素已从disabled状态恢复
最易被忽略的是：多个异步加载的表单区域共存时，焦点捕获必须绑定到具体实例，而不是全局监听focusin——否则A区加载完成触发的聚焦，可能误操作B区还在挂载中的输入框。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
