HTML5中autofocus属性仅在元素原生支持且页面加载时可聚焦时生效；仅<input>、<textarea>、<select>、<button>等可聚焦元素支持，布尔属性无需值，多实例仅首例生效，隐藏或动态插入元素需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>、<select>、<button> - ✅ 部分支持：
<iframe>（需设置allow="focus"且内容页允许） - ❌ 不支持：
<div>、<p>、<span>（即使加了tabindex，autofocus仍无效）
注意：autofocus 在 <contenteditable> 元素上**不生效**，必须用 JS 调用 .focus()。
立即学习“前端免费学习笔记（深入）”；
页面加载后 autofocus 失效的典型原因
即使语法正确，autofocus 也可能“看起来没反应”，本质是浏览器策略或 DOM 状态导致的聚焦被拦截或丢弃。
- 页面尚未完成解析（如
autofocus写在<body>末尾但脚本阻塞了渲染） - 用户已手动聚焦过其他元素（浏览器通常只执行一次初始
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 控制时机和条件。
