autofocus 属性仅在 HTML 初始解析时生效，动态插入、框架条件渲染、隐藏元素、多 autofocus 元素及非表单控件均无效；SPA 和移动端需用 JS 主动聚焦并容错处理。
autofocus 属性不能保证焦点“跳转”成功，它只是一次性声明，且在多数移动端和 SPA 场景中会静默失效。
autofocus 为什么页面加载后没聚焦
常见现象是加了 autofocus 却毫无反应，根本原因不是写法错，而是浏览器只在 HTML 初始解析阶段识别该属性 —— 动态插入的元素、Vue/React 条件渲染的组件、innerHTML 注入的内容，哪怕 DOM 中最终存在 autofocus，也完全无效。
- 多个元素写了
autofocus：浏览器只对第一个解析到的生效，其余被忽略（不报错也不提示） - 元素被
display: none或visibility: hidden包裹：不可聚焦，autofocus 失效 - iOS Safari 在页面从后台切回、或 iframe 内加载时，常静默忽略
autofocus - 密码管理器、翻译插件等浏览器扩展可能劫持焦点，导致 autofocus 被覆盖且无迹可寻
哪些元素能用 autofocus，哪些不能
只有原生可聚焦的表单控件才支持 autofocus，且需满足状态可用。不是所有带 tabindex 的元素都能靠它自动聚焦。
- ✅ 有效：
<input type="text">、<textarea>、<button>、<select> - ❌ 无效：
<input type="hidden">、<input disabled>、<div>（即使有tabindex="0"，autofocus仍不触发） - ⚠️ 有陷阱：
<div tabindex="-1">加autofocus不生效（tabindex="-1"禁止自动聚焦）；<div tabindex="0">加autofocus也不生效 —— 因为autofocus不作用于非表单控件，必须靠 JS 调用.focus()
SPA 和框架中怎么安全聚焦输入框
在 React/Vue/Svelte 等框架里，autofocus 基本形同虚设。必须改用 JS 主动聚焦，但时机和容错比想象中更关键。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- React：用
useEffect(() => { inputRef.current?.focus(); }, [])，但要确保 ref 已绑定且元素已挂载 - Vue：在
onMounted中调用inputRef.value?.focus()，避免在v-if切换前就执行 - 通用容错写法：
if (input && document.activeElement !== input) { input.focus(); }—— 防止用户已在别处打字却被强行打断 - 不要用
setTimeout(() => el.focus(), 0)：在低性能设备或动画未结束时极易失败
移动端和可访问性上最易被忽略的点
自动聚焦在体验设计上不是“省一次点击”那么简单，它直接干预用户的注意力流和操作节奏。
- iOS Safari 可能强制滚动到
autofocus元素，导致页面错位、内容被遮挡，且无法用 CSS 或 JS 拦截 - 屏幕阅读器用户可能刚进入页面，还没听到
<h1>就被拉到表单，违反 WCAG “不打断用户控制流” 原则 - 软键盘在页面加载瞬间弹出，会遮挡关键信息（比如登录页的错误提示、条款链接），尤其在小屏设备上
- 真正需要它的场景其实很窄：独立搜索页、模态框内唯一输入框、登录弹窗 —— 其他情况建议放弃
autofocus，改由用户主动触发
autofocus 表面是个属性，实际是个契约：你声明“这里该聚焦”，但浏览器、系统、辅助技术、甚至用户当前操作状态，都有权拒绝履行。它从来不是“自动跳转”的保证，而只是初始加载时的一次试探性请求。
