autofocus属性使表单控件在页面加载时自动获得焦点，但常因动态插入、隐藏状态、不支持元素、多autofocus冲突、SPA hydrate时机或插件劫持而失效；可靠替代是JS显式focus()并加activeElement校验。
autofocus 属性的作用很直接：让指定的表单控件在页面加载完成时自动获得焦点，用户无需点击即可开始输入。
为什么autofocus经常“不生效”
它不是 JS 控制的开关，而是浏览器在解析原始 HTML 时“一次性触发”的行为。常见失效原因包括：
- 元素是动态插入的（比如
innerHTML = '<input autofocus>'），autofocus被完全忽略 - 元素初始状态为
display: none或visibility: hidden，浏览器跳过聚焦 - 用了不支持的元素类型，例如
<div autofocus>或<input type="hidden" autofocus> - 多个
autofocus元素共存——只有第一个被解析到的生效，其余被规范强制忽略 - SPA 场景下 SSR 渲染后客户端 hydrate，DOM 实际由 JS 挂载，
autofocus失效
autofocus 支持哪些元素
仅原生可聚焦、且未被禁用的表单控件才真正有效：
- ✅ 明确支持：
<input type="text">、<input type="email">、<input type="search">、<input type="password">、<textarea>、<button>、<select>（部分浏览器） - ⚠️ 有条件支持：
<input type="color">—— 属性存在，但 Safari 和 IE 不支持该类型本身 - ❌ 不支持：
<input type="hidden">、<input disabled>、<div tabindex="0">（即使加了tabindex，autofocus仍无效）
比autofocus更可靠的做法：用 JS 显式 focus()
尤其在模态框弹出、条件渲染、路由切换等场景，JS 控制更可控、更可预测：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
const input = document.getElementById('search-input');
if (input && document.activeElement !== input) {
input.focus();
}
关键点：
- 加
document.activeElement !== input判断，避免覆盖用户刚手动点过的其他输入框 - 不要在 DOM 尚未就绪时调用（比如放在
<head>的 script 中），推荐用DOMContentLoaded或setTimeout(0)延迟执行 - 移动端慎用：自动弹出软键盘可能遮挡内容，或打断用户浏览意图
真正容易被忽略的是焦点抢占问题——密码管理器、翻译插件、甚至某些框架的内部逻辑，都可能在页面加载后几毫秒内把焦点抢走。这时候看控制台没有报错，autofocus 也确实执行过了，但用户就是没看到光标。这种“无声失效”，比语法错误更难排查。
