autofocus属性使表单控件在页面加载时自动获得焦点，但常因动态插入、隐藏状态、不支持元素、多autofocus冲突、spa hydrate时机或插件劫持而失效；可靠替代是js显式focus()并加activeelement校验。

autofocus 属性的作用很直接：让指定的表单控件在页面加载完成时自动获得焦点，用户无需点击即可开始输入。

为什么autofocus经常“不生效”

它不是 JS 控制的开关，而是浏览器在解析原始 HTML 时“一次性触发”的行为。常见失效原因包括：

• 元素是动态插入的（比如 innerHTML = '<input autofocus>'），autofocus 被完全忽略
• 元素初始状态为 display: none 或 visibility: hidden，浏览器跳过聚焦
• 用了不支持的元素类型，例如 <div autofocus> 或 <code><input type="hidden" autofocus>
• 多个 autofocus 元素共存——只有第一个被解析到的生效，其余被规范强制忽略
• SPA 场景下 SSR 渲染后客户端 hydrate，DOM 实际由 JS 挂载，autofocus 失效

autofocus 支持哪些元素

仅原生可聚焦、且未被禁用的表单控件才真正有效：


Wechat HTML Publisher
直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。
下载
• ✅ 明确支持：<input type="text">、<input type="email">、<input type="search">、<input type="password">、<textarea></textarea>、<button></button>、<select></select>（部分浏览器）
• ⚠️ 有条件支持：<input type="color"> —— 属性存在，但 Safari 和 IE 不支持该类型本身
• ❌ 不支持：<input type="hidden">、<input disabled>、<div tabindex="0">（即使加了 <code>tabindex，autofocus 仍无效）

  比autofocus更可靠的做法：用 JS 显式 focus()

  尤其在模态框弹出、条件渲染、路由切换等场景，JS 控制更可控、更可预测：

  const input = document.getElementById('search-input');
  if (input && document.activeElement !== input) {
    input.focus();
  }

  关键点：

  • 加 document.activeElement !== input 判断，避免覆盖用户刚手动点过的其他输入框
  • 不要在 DOM 尚未就绪时调用（比如放在 的 script 中），推荐用 DOMContentLoaded 或 setTimeout(0) 延迟执行
  • 移动端慎用：自动弹出软键盘可能遮挡内容，或打断用户浏览意图

  真正容易被忽略的是焦点抢占问题——密码管理器、翻译插件、甚至某些框架的内部逻辑，都可能在页面加载后几毫秒内把焦点抢走。这时候看控制台没有报错，autofocus 也确实执行过了，但用户就是没看到光标。这种“无声失效”，比语法错误更难排查。