autofocus 属性仅对首个可聚焦表单元素生效，受浏览器策略限制（如 Chrome v80+ 禁止 iframe 或非用户手势触发时聚焦）、元素可见性及类型约束（不支持 div[tabindex]、input[type=file]等），且存在无障碍风险；推荐优先用 input.focus() 配合时机控制（如 requestAnimationFrame）以提升可靠性与用户体验。
autofocus 属性看似简单，但实际在表单交互中容易失效或引发意外行为。它只对第一个带该属性的可聚焦元素生效，且页面加载后立即触发——不等 JavaScript 执行、不等 DOM 完全就绪、也不受 display: none 或 visibility: hidden 保护。
为什么 autofocus 在某些浏览器里没反应？
常见原因不是写法错误，而是浏览器策略限制：
- Chrome / Edge 从 v80+ 起，默认禁止在 iframe 或非用户手势触发的上下文中自动聚焦（尤其当页面由后台标签页恢复时）
- Safari 对
autofocus的支持更保守：若元素被hidden、disabled、或父级display: none，会直接忽略该属性（不报错，也不尝试） - Firefox 允许聚焦，但若元素在
document.hidden === true时加载（如页面未激活），焦点会被静默丢弃
用 autofocus 还是用 input.focus()？
取决于控制粒度和时机：
-
autofocus是声明式、零 JS、适合「首次加载即聚焦」的简单场景（如登录页的<input name="username">） -
input.focus()是命令式、可延迟、可加条件判断，比如：if (document.hasFocus() && !document.querySelector('[data-skip-focus]')) {<br> document.getElementById('search').focus();<br>} - 注意：用
input.focus()时，若在DOMContentLoaded里调用，仍可能因元素尚未渲染完成而失败；稳妥做法是用setTimeout(..., 0)或requestAnimationFrame微任务兜底
哪些元素真正支持 autofocus？
不是所有带 tabindex 的元素都行。只有原生可聚焦且未被禁用的表单控件才被规范支持：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- ✅ 支持：
<input>（除type="hidden"）、<textarea>、<button>、<select>、<iframe>（仅部分浏览器） - ❌ 不支持：
<div tabindex="0">、<p contenteditable>、自定义 Web Component（除非显式实现focus()并响应autofocus） - ⚠️ 特别注意：
<input type="file">在多数浏览器中会忽略autofocus，出于安全限制（防止自动触发文件选择）
无障碍与用户体验的隐藏代价
autofocus 会强制屏幕阅读器跳转到该元素并朗读其标签，这对依赖键盘导航的用户可能造成困惑——尤其当焦点落在页面中部或底部的输入框时，他们可能完全错过顶部的提示文案或错误说明。
更稳妥的做法是：
- 只对「主操作入口」使用
autofocus（如搜索页的搜索框、登录页的用户名输入框） - 避免在模态框（
<dialog>）打开时靠autofocus聚焦——应改用dialog.showModal()后手动focus()，并确保焦点被捕获在模态框内 - 如果页面有服务端渲染的错误提示（如「密码错误」），不要让焦点落在密码框上，否则用户看不到上方的错误信息
最常被忽略的一点：没有 JS 时 autofocus 确实可用，但一旦你写了 document.getElementById('x').focus()，就必须同时处理 autofocus 冲突——浏览器不会自动取消已生效的 autofocus，两次聚焦可能触发两次屏幕阅读器播报，或导致移动端软键盘反复弹收。
