autofocus仅在HTML初始解析时生效，动态插入或隐藏元素中无效；仅对可聚焦表单控件有效，SPA和模态框需用focus()手动控制并注意时机与平台限制。
autofocus 属性只在 HTML 初始解析时生效
它不是 JS，不执行、不报错、不重试，浏览器只在解析原始 HTML 时“看一眼”就决定是否聚焦。动态插入的元素（比如 innerHTML 写入、Vue/React 组件挂载后、appendChild 添加）哪怕带 autofocus，也完全无效。
常见失效场景包括：
-
input被包裹在display: none或visibility: hidden的父容器中 → 浏览器跳过该元素 -
input disabled autofocus或input type="hidden" autofocus→ 原生不可聚焦，属性被忽略 - 多个
autofocus同时存在 → 只有第一个被 HTML 解析器读到的可能生效，其余静默丢弃 - iOS Safari 中几乎总是静默忽略 → 这是平台策略，不是 bug，也不报错
哪些元素能用 autofocus？哪些不能？
autofocus 仅对原生可聚焦且处于可交互状态的表单控件有效：
- ✅
<input type="text">、<input type="search">、<input type="email">、<textarea>、<select>、<button> - ❌
<input type="hidden">、<input type="checkbox">、<div tabindex="0">→ 即使加了tabindex，autofocus本身也不起作用 - ⚠️
<input type="password">在部分 Android 浏览器中会被跳过，不保证聚焦
写法必须是布尔属性：autofocus，不是 autofocus="true"，更不是 data-autofocus 或 el.setAttribute('autofocus', '') —— 后者毫无效果。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
SPA 和模态框里 autofocus 失效，怎么补救？
React/Vue/Angular 中，路由切换后新渲染的输入框不会触发 autofocus；JS 动态显示的模态框（如 modal.style.display = 'block'）同理。此时必须用 focus() 手动控制，但要注意时机和条件：
- 确保元素已挂载且可见：检查
offsetParent !== null或用getComputedStyle(input).display !== 'none' - 避免覆盖用户操作：调用前加判断
if (document.activeElement !== input) input.focus() - 移动端 iOS 必须在用户手势上下文内调用：比如按钮点击回调中立即或微任务里执行
input.focus()，否则被静默拒绝 - 推荐时机：Vue 的
onMounted+nextTick，React 的useEffect+setTimeout(() => input.focus(), 0)或requestAnimationFrame
移动端软键盘弹不出？焦点和键盘是两回事
即使 input.focus() 成功，iOS Safari 和部分 Android 浏览器仍可能不弹软键盘——聚焦 ≠ 弹键盘。尤其在无用户手势、页面刚加载、或模态框未完全渲染完成时：
- Android 上可尝试聚焦后立刻调用
input.select()提高键盘触发率 - iOS 必须依赖用户点击/触摸事件触发后的同步或微任务调用，否则一律失败
- 模态框中建议配合
input.scrollIntoView({ block: 'nearest' })，防止键盘遮挡输入框 - 别在
DOMContentLoaded里直接对动态模态框调用focus()—— 此时 DOM 存在，但元素很可能还没 visible 或没挂载到可视区域
真正容易被忽略的是：焦点管理不是“让光标出现”，而是协调 DOM 状态、可访问性语义、平台策略和用户当前意图。一个没做 activeElement 判断的 focus()，可能在用户刚点完密码框时强行切走焦点，体验反而更差。
