autofocus仅在html初始解析时生效，动态插入无效；ios safari等场景需用element.focus()手动聚焦，且须确保元素可见、可聚焦、未禁用。
autofocus 属性不是“自动聚焦开关”，而是浏览器在 HTML 初始解析时对第一个符合条件的元素做的一次性处理。它在 SPA、模态框、iOS Safari 等主流场景中基本失效，必须用 element.focus() 补位。
autofocus 只在 HTML 解析阶段生效，动态插入无效
浏览器只在加载页面时扫描原始 HTML 源码，遇到 autofocus 就尝试聚焦；后续任何 JS 操作都不会触发它。
-
el.innerHTML = '<input autofocus>'或document.body.appendChild(input)→autofocus属性存在，但完全不触发 - Vue/React 组件模板里写
<input autofocus>→ SSR 渲染或 hydration 后 DOM 已挂载，错过解析时机 - 服务端返回新表单 HTML 并用 JS 插入 → 浏览器不会重新解析，
autofocus静默忽略
哪些元素真正支持 autofocus？类型和状态都得过关
不是所有 <input> 都行，必须同时满足：可文本输入 + 未禁用 + 初始可见 + 原生可聚焦。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- ✅ 安全可用：
<input type="text">、<input type="email">、<textarea></textarea>、<button></button> - ⚠️ 条件可用：
<select></select>（Chrome/Edge 支持，Firefox 和旧 Safari 忽略） - ❌ 完全无效：
<input type="hidden">、<input type="checkbox">、<input type="file">、<input disabled>、<input style="display:none">
iOS Safari 下 autofocus 几乎总是被忽略
这不是 bug，是策略限制：iOS Safari 禁止非用户手势上下文中的自动键盘弹出，autofocus 属于“非交互式加载行为”，直接静默跳过。
- 首页
<input autofocus>→ 光标不动，键盘不弹 - 模态框
show()后调input.focus()，若没包裹在click或touchstart回调里 → 依然失败 - 哪怕聚焦成功，软键盘可能遮挡输入框，尤其在 viewport 缩放或 fixed 定位区域
可靠做法：统一用 JS 手动 focus()，并校验关键条件
放弃在 HTML 里写 autofocus，改用 JS 在真实挂载后、元素可见且未被用户抢占焦点时调用 .focus()。
- React：
useEffect(() => { ref.current?.focus() }, [])，加if (typeof window !== 'undefined')防 SSR 报错 - Vue：
onMounted(() => inputRef.value?.focus())，确保v-if已为 true - 原生 JS：
modalEl.addEventListener('shown', () => input.focus())，或监听DOMContentLoaded后检查document.activeElement !== input - 移动端兜底：
document.body.addEventListener('click', handler, { once: true })，在 handler 里立即input.focus()
最易被忽略的是：自动聚焦不是“让光标出现”，而是“把焦点交出去”。如果元素还没渲染完成、被 CSS 隐藏、或 tabindex 被设为 -1，.focus() 也会静默失败——它不报错，也不重试，只返回 undefined。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
