如何让HTML元素在加载时自动聚焦？button元素autofocus属性详解-html教程-PHP中文网

autofocus属性仅在页面首次加载时对首个已挂载、可见且未禁用的原生button生效，其为html解析阶段行为，不触发focus事件，且在ios safari等移动端常因无用户手势而失效。

如何让html元素在加载时自动聚焦？button元素autofocus属性详解

autofocus 属性能让 <button></button> 在页面加载时自动获得焦点，但它的生效有明确前提：元素必须已挂载、可见、未禁用，且整个文档中只能有一个 autofocus 元素——否则浏览器只认第一个，其余被忽略。

所有原生 <button></button> 都支持 autofocus，无论 type="button"、type="submit" 还是 type="reset"。但以下情况会失效：

<button disabled autofocus></button> —— disabled 会彻底阻断聚焦
<button style="display: none" autofocus></button> 或 visibility: hidden —— 元素不可见时浏览器跳过聚焦
多个 button 同时写 autofocus —— 只有 DOM 中第一个解析到的生效，不报错也不提示

autofocus 是 HTML 解析阶段的行为，由浏览器在 DOM 构建完成但脚本尚未执行时触发；而 element.focus() 是运行时命令，需手动控制时机。关键差异包括：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

autofocus 只在页面首次加载时生效一次，SPA 路由切换或动态插入的 button 即使带该属性也完全无效
autofocus 不触发 focus 事件（部分旧版 IE 可能例外），如需监听，必须用 JS 绑定
element.focus() 可配合 requestAnimationFrame 或 setTimeout(() => el.focus(), 0) 确保元素已渲染并可见，更适合模态框、动态表单等场景

iOS Safari 默认阻止非用户手势触发的键盘弹出，因此即使 <button autofocus></button> 渲染成功，焦点也可能被静默丢弃——尤其在无用户交互就显示的弹层中。应对策略包括：

若按钮用于触发模态框（如“登录”按钮），不要给按钮本身加 autofocus，而应在模态框显示后对内部输入框调用 focus()
避免在 window.onload 之前尝试 focus()，优先用 DOMContentLoaded 或 requestAnimationFrame
对无障碍敏感的场景，确保按钮有明确语义（如 role="button"）和键盘可操作性（tabindex="0"），别只依赖 autofocus