autofocus属性仅在html初始解析时生效，js动态添加无效；需手动调用.focus()并确保元素已挂载、可见且tabindex合适。
HTML 的 autofocus 属性能实现自动聚焦，但只对第一个可聚焦元素生效，且不能通过 JS 动态添加后触发
autofocus 属性为什么有时不生效
常见错误现象是加了 autofocus 却没聚焦，尤其在 SPA 或表单动态渲染场景下。根本原因是：浏览器只在初始 HTML 解析阶段识别该属性，后续用 JS 插入或设置 autofocus="true" 都无效。
- 只支持原生可聚焦元素：
<input>、<textarea></textarea>、<button></button>、<select></select>，<div contenteditable> 不行（除非显式加 <code>tabindex） - 同一页面多个
autofocus时，仅第一个被解析的元素生效 - 若页面有 iframe 或模态框遮挡，焦点可能被拦截或视觉上“看不见”
- 移动端 Safari 对自动聚焦限制更严，部分版本会静默忽略
- 用
setTimeout延迟 0ms 是最简单兼容方案：setTimeout(() => inputEl.focus(), 0);
- Vue 中推荐用
nextTick；React 中放在useEffect里，依赖项为空数组 - 如果元素被
display: none或visibility: hidden包裹，先确保它可见再调用focus() - 避免在
blur回调里立即focus()，可能触发循环或被浏览器阻止 - 要让自定义元素（如
<div>）支持 <code>autofocus，必须设tabindex="0"或正整数 -
tabindex="-1"允许 JS 调用.focus()，但不参与自动聚焦和 Tab 导航 - 设
tabindex="0"后，该元素会进入 Tab 顺序，可能改变键盘导航逻辑，需评估体验
如何让 JS 动态插入的输入框获得焦点
当表单是 JS 渲染（如 Vue/React 组件挂载、innerHTML 注入），必须手动调用 .focus()，且要注意时机 —— 元素得已挂载并可交互。
autofocus 和 tabindex 的关系
autofocus 和 tabindex 独立工作，但会互相影响行为。比如一个 <div tabindex="-1"> 加了 <code>autofocus，不会自动聚焦（因为 tabindex="-1" 表示不可通过 Tab 键到达，也不参与自动聚焦）。
立即学习“前端免费学习笔记（深入）”；
真正容易被忽略的是：自动聚焦不是“保证用户看到输入框”，而是“把焦点交给浏览器处理”。如果页面加载慢、JS 阻塞、或系统级辅助功能开启（如 macOS 的“粘滞键”），实际表现可能完全偏离预期。
