autofocus仅在页面初始加载时对静态HTML元素生效，动态插入、模态框、框架组件中均失效，需用JavaScript显式调用.focus()并配合时机控制与兼容性处理。

autofocus 属性在现代浏览器中确实能自动聚焦到指定表单元素，但它的行为受限制——页面加载时仅第一个带 autofocus 的元素生效，且**不会触发 focus 事件监听器**（除非手动调用 .focus()），更关键的是：它在模态框、动态插入的 DOM 或 Web Components 中常常失效。

autofocus 只在页面初始加载时起作用

这是最常被忽略的前提。如果元素是 JS 动态插入（比如通过 innerHTML 或 appendChild 添加），即使写了 autofocus，浏览器也不会处理它。因为 autofocus 是 HTML 解析阶段的“一次性指令”，不是运行时监听器。

• ✅ 正确场景：静态 HTML 中的 <input autofocus>
• ❌ 失效场景：document.getElementById('modal').innerHTML = '<input autofocus>';
• ⚠️ 注意：Vue/React 等框架中，autofocus 在组件挂载后才渲染，也属于“动态插入”，原生属性无效

替代方案：用 JavaScript 显式调用 .focus()

更可靠、可控，还能配合条件判断和时机控制。尤其适合模态框打开、Tab 切换、表单重置等场景。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 确保 DOM 已就绪：用 DOMContentLoaded 或 requestAnimationFrame 避免 focus() is not a function
• 处理移动端兼容性：iOS Safari 对非用户手势触发的 .focus() 会静默忽略，需结合 input 或 click 事件触发
• 示例（安全聚焦）：

  function safeFocus(el) {
    if (!el) return;
    requestAnimationFrame(() => {
      el.focus();
    });
  }
  // 模态框显示后
  document.getElementById('login-modal').classList.add('show');
  safeFocus(document.getElementById('username'));

autofocus 和 form.reset() 后的焦点丢失问题

调用 form.reset() 会清除所有字段值，同时**移除当前聚焦状态，且不会恢复 autofocus 行为**——哪怕该字段原本就有 autofocus。

立即学习“前端免费学习笔记（深入）”；

• 必须手动补回：重置后立即 inputEl.focus()
• 避免重复聚焦：检查 document.activeElement !== inputEl 再执行
• 如果用了 required + checkValidity()，验证失败时可顺便聚焦首个错误项，比依赖 autofocus 更实用

真正需要自动聚焦的地方，几乎都绕不开 JS 主动控制；autofocus 仅适用于最简单的单页静态表单首屏入口。别把它当成焦点管理的解决方案，它只是一个轻量级的 HTML 提示符。