HTML如何标记文档的自动对焦_HTML标记文档自动对焦属性【属性】

autofocus仅对原生可聚焦表单元素（如input、textarea、select、button）有效，且只在html解析完成时对dom中第一个该属性元素生效；动态添加或非编辑态input、contenteditable元素等均无效。

用 autofocus 属性就能让元素加载时自动获得焦点，但只对页面中第一个带该属性的可聚焦元素生效，且不能通过 js 动态添加后触发。

哪些元素支持 autofocus？

只有原生可聚焦（focusable）的表单控件才真正起作用，比如 input、textarea、select、button。像 div 或 p 即使加了 tabindex 也不响应 autofocus。

• input 类型必须是可编辑的（type="text"、"email"、"search" 等），type="hidden" 或 disabled 状态下无效
• contenteditable="true" 的元素不认 autofocus，得靠 JS 调用 .focus()
• 若多个元素都写了 autofocus，浏览器只对 DOM 中第一个生效，其余被忽略

autofocus 在什么时机起作用？

它在 HTML 解析完成、元素插入文档流后立即触发，早于 DOMContentLoaded。这意味着：

• 服务端渲染（SSR）或静态 HTML 中写死的 autofocus 最可靠
• 通过 JS 动态插入带 autofocus 的元素（如 innerHTML += '<input autofocus>'）不会触发聚焦 —— 浏览器不重新解析该属性
• Vue/React 等框架中直接写 autofocus 可能被忽略（取决于模板编译方式），更稳妥的是用 ref + mounted 或 useEffect 调用 .focus()

移动端和无障碍要注意什么？

部分 ios safari 和旧版 android webview 会忽略 autofocus，尤其在页面从后台切回或 iframe 场景下；同时，自动弹出软键盘可能打断用户操作流。

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

• WCAG 2.1 建议避免非用户触发的自动聚焦，除非是模态框首次打开等明确上下文
• 如果页面顶部有 banner 或导航栏，autofocus 可能导致视口意外滚动，可配合 scroll-margin-top 调整定位
• 测试时务必在真机上验证：iOS 上 input 加了 autofocus 却没弹键盘，大概率是 Safari 主动抑制了

真正麻烦的不是怎么写这个属性，而是它“只生效一次”+“无法重试”的特性 —— 页面加载失败重试、动态 tab 切换、SPA 路由跳转后想再次聚焦，都得切到 JS 控制，别指望 autofocus 拿来反复用。