autofocus仅对可聚焦的交互型表单控件生效，如text、email等，不支持hidden、checkbox等；同一页面仅首个autofocus元素生效；动态插入或SPA路由切换后需手动focus()；移动端限制严格，无障碍使用需谨慎。
autofocus 属性只对特定表单控件生效
不是所有 <input> 类型都支持 autofocus。它仅适用于可获得焦点且用户可交互的元素，比如：text、search、tel、url、email、password、number、date 等；hidden、file（部分浏览器限制）、range、color 通常不触发或行为不一致。
其他支持元素包括：<textarea>、<button>、<select>（但某些旧版 Safari 对 <select> 的 autofocus 支持不稳定）。
常见错误是给 <input type="file"> 或 <input type="checkbox"> 加 autofocus，结果无反应——这不是 bug，是规范限制。
页面加载时只有一个元素能真正获得焦点
HTML 规范明确：同一文档中多个 autofocus 属性存在时，**只有第一个被解析到的元素生效**，其余被忽略。浏览器不会报错，也不会给出提示。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：
- 动态插入含
autofocus的元素（如通过 JS 插入 DOM），该属性不会触发聚焦——autofocus是加载时行为，不响应后续 DOM 变更 - SPA 中路由切换后新渲染的
autofocus输入框不会自动聚焦，需手动调用element.focus() - 模态框（modal）内使用
autofocus时，若模态框本身未显示（display: none / visibility: hidden），聚焦会失败或被丢弃
与 JavaScript focus() 的关键区别
autofocus 是声明式、由浏览器在初始 HTML 解析阶段控制的；而 element.focus() 是命令式、运行时可控的，更灵活但也更易出错。
典型差异：
-
autofocus不会触发focus事件（因为聚焦发生在事件循环之前），而.focus()会 -
.focus()在元素不可见、被遮挡、或tabindex="-1"时可能静默失败；autofocus同样受限，但失败时无反馈 - 移动端 iOS Safari 对自动聚焦限制极严：只有用户手势触发的上下文（如点击按钮后）才允许
.focus()，autofocus在非主文档（如 iframe）或非首屏加载中基本无效
示例：想确保模态框输入框聚焦，不能只靠 autofocus，得这样补一手：
modalElement.addEventListener('shown', () => {
const input = modalElement.querySelector('input');
if (input) input.focus();
});
无障碍与用户体验的实际影响
autofocus 会跳过页面顶部内容（如跳过导航、banner），对屏幕阅读器用户可能造成困惑，尤其当焦点落在中间表单而非页首时。
WCAG 建议：仅在有明确用户意图时使用（如搜索页、登录弹窗），避免在首页或内容页滥用。如果页面有重要通知、错误提示或导航变更，自动聚焦反而干扰操作流。
另一个现实问题：Chrome 93+ 开始，当用户从地址栏回车打开页面时，若页面含 autofocus，焦点会“抢走”地址栏原本的选中状态，导致用户无法直接按 Ctrl+L 再编辑 URL——这个细节常被忽略，但真实影响高频操作用户。
