autofocus仅在页面首次加载且元素存在于初始HTML时生效；动态插入、框架组件、隐藏元素、form.reset()后均失效，须用JS主动调用.focus()并注意SSR和移动端兼容性。
autofocus 属性只在页面首次加载、且元素存在于初始 HTML 中时才可能生效；绝大多数“没反应”的情况，是因为它根本没被浏览器处理——不是你写错了，是它压根不工作。
autofocus 在动态插入或框架组件中必然失效
浏览器只在 HTML 解析阶段扫描并执行 autofocus，JS 后续用 innerHTML、appendChild() 或 Vue/React 渲染出来的 <input autofocus>，该属性会被完全忽略。
- ❌
document.getElementById('form').innerHTML = '<input type="text" autofocus>'→ 无效 - ❌ React 组件里写
<input autoFocus />（即使首字母大写）→ SSR 或挂载延迟时大概率不聚焦 - ✅ 正确做法：用
ref+useEffect（React）或mounted钩子（Vue）调用.focus() - ⚠️ 注意：SSR 场景下直接调用
.focus()会报document is not defined，需包裹if (typeof window !== 'undefined')
autofocus 不触发 focus 事件，也不保证键盘弹出
它只是让浏览器“把焦点设过去”，但不会派发 focus 事件（旧版 Safari 除外），更不会强制唤起软键盘——尤其在 iOS Safari 中，autofocus 几乎总是被静默丢弃。
- ❌ 依赖
input.addEventListener('focus', handler)捕获 autofocus 行为 → 大概率收不到 - ✅ 若需监听，必须手动调用
el.focus()，它会触发focus事件 - ✅ 移动端安全聚焦：绑定在用户手势后（如按钮点击），再立即调用
.focus() - ⚠️
.focus({ preventScroll: true })可防止页面滚动，autofocus 没这个能力
多个 autofocus 元素或隐藏状态导致行为不可控
浏览器只对第一个解析到的 autofocus 元素生效；若元素被 display: none、visibility: hidden、inert 或 tabindex="-1" 包裹，autofocus 直接跳过。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- ❌
<div style="display:none"><input autofocus></div>→ 无效 - ❌
<input autofocus tabindex="-1">→ 无效（tabindex="-1"排除自动聚焦） - ✅ 替代隐藏方案：用
opacity: 0; pointer-events: none;或绝对定位移出视口 - ✅ 自定义元素支持 autofocus：需加
tabindex="0"，但会进入 Tab 流，需权衡键盘导航体验
form.reset() 后 autofocus 不恢复，必须手动补焦
调用 form.reset() 会清空值并移除当前焦点，且不会重新触发 autofocus 逻辑——哪怕那个 input 原本就带 autofocus。
- ❌
form.reset(); // 之后光标不会回到 autofocus 输入框 - ✅ 正确做法：重置后立刻
inputEl.focus()，并加防重判断if (document.activeElement !== inputEl) - ✅ 更实用的替代：结合
checkValidity()，验证失败时聚焦首个:invalid元素，比依赖 autofocus 更可靠
真正容易被忽略的是：autofocus 是个“一次性提示符”，不是焦点控制系统。它不响应状态变化、不处理条件逻辑、不兼容动态场景——所有需要稳定聚焦的地方，最终都得靠 JS 主动控制。
