HTML5中autofocus属性仅在元素原生支持且页面加载时可聚焦时生效；仅、、、等可聚焦元素支持，布尔属性无需值，多实例仅首例生效，隐藏或动态插入元素需JS手动focus。
HTML5 中 autofocus 属性是否生效，只看元素是否在页面加载时可聚焦
浏览器不识别 _autofocus、data-autofocus 或任何带下划线/前缀的变体。只有原生的 autofocus 属性（无下划线、无命名空间）会被解析并触发自动聚焦行为。
常见误写包括：_autofocus、autofocus="true"、autofocus="on" —— 这些都不会触发聚焦，因为 autofocus 是布尔属性，只需存在即可，值本身被忽略。
-
<input autofocus>✅ 生效 -
<input autofocus="">✅ 生效（空字符串也合法） -
<input _autofocus>❌ 不识别，纯自定义属性 -
<input data-autofocus>❌ 同样不触发聚焦逻辑
哪些元素支持 autofocus？
仅限可聚焦的表单控件和部分交互元素。浏览器按规范实现，不支持的元素即使写了 autofocus 也会静默忽略。
- ✅ 支持：
<input>、<textarea></textarea>、<select></select>、<button></button> - ✅ 部分支持：
<iframe></iframe>（需设置allow="focus"且内容页允许） - ❌ 不支持：
<div>、<code><p></p>、<span></span>（即使加了tabindex，autofocus仍无效）注意：
autofocus在<contenteditable></contenteditable>元素上**不生效**，必须用 JS 调用.focus()。立即学习“前端免费学习笔记（深入）”；
页面加载后
autofocus失效的典型原因即使语法正确，
autofocus也可能“看起来没反应”，本质是浏览器策略或 DOM 状态导致的聚焦被拦截或丢弃。- 页面尚未完成解析（如
autofocus写在末尾但脚本阻塞了渲染） - 用户已手动聚焦过其他元素（浏览器通常只执行一次初始
autofocus） - 元素被
display: none或visibility: hidden隐藏（聚焦前必须是可渲染且可交互状态） - 同一页面出现多个
autofocus元素（仅第一个生效，其余被忽略） - 移动端 Safari / Chrome 某些版本对 iframe 或弹层内元素的
autofocus有额外限制
验证是否真正触发：打开 DevTools → Elements 面板 → 查看目标元素是否带有
:focus状态，或监听focus事件确认。替代方案：JS 手动聚焦更可控
当
autofocus不可靠（比如动态插入的元素、条件聚焦、兼容老浏览器），直接调用.focus()是最稳妥的做法。document.addEventListener('DOMContentLoaded', () => { const input = document.querySelector('#search-input'); if (input && input.closest(':not([hidden])')) { input.focus(); } });关键点：
- 确保 DOM 已就绪（用
DOMContentLoaded或defer脚本） - 检查元素是否可见且未被禁用（
input.disabled === false && input.offsetParent !== null） - 避免在模态框未显示时提前聚焦（需等
show动画/类名添加完成后再调用）
复杂场景下，
autofocus只是快捷写法，真正要稳，还得靠 JS 控制时机和条件。 - 页面尚未完成解析（如
