autofocus 属性仅在 HTML 初始解析时生效，不响应动态插入；多个 autofocus 元素中仅首个可见且未禁用者获焦点；移动端 Safari 常静默忽略；可靠方案是 DOM 就绪后手动调用 focus()。
autofocus 属性确实能在页面加载后自动聚焦到指定 <input> 元素，但它不是“挂载后”的可靠钩子——它只在 HTML 解析时生效，且有明确限制。
autofocus 只在初始渲染时起作用，不响应动态插入
浏览器只在元素首次被解析进 DOM 时检查 autofocus。如果 <input autofocus> 是后来用 JS 动态插入的（比如通过 innerHTML 或 appendChild），该属性会被忽略，焦点不会自动触发。
- ✅ 正确：直接写在 HTML 文件里或服务端渲染的模板中
- ❌ 无效：用
document.createElement('input')创建后加autofocus属性再插入 - ⚠️ 注意：
autofocus是布尔属性，写成autofocus="false"依然会生效——只要存在就启用
多个 autofocus 会导致行为不可预测
HTML 规范允许页面中存在多个 autofocus，但浏览器只对第一个可聚焦、未被禁用（disabled）、未被隐藏（display: none 或 visibility: hidden）的元素生效。后续的都被跳过。
- 如果第一个
<input autofocus>被disabled或hidden，焦点不会“顺延”到第二个 - 移动端 Safari 对
autofocus支持极弱，多数情况静默忽略（尤其在非用户手势触发的上下文中） - Chrome 和 Firefox 在 iframe 内或弹窗中也可能抑制自动聚焦，出于防骚扰策略
需要“挂载后”聚焦？用 JavaScript 显式调用 focus()
真正可控的方式是监听 DOM 就绪时机，然后手动调用 .focus()。这比依赖 autofocus 更可靠，也兼容动态场景。
立即学习“前端免费学习笔记（深入）”；
document.addEventListener('DOMContentLoaded', () => {
const input = document.querySelector('#search-input');
if (input && !input.disabled && input.offsetParent !== null) {
input.focus();
}
});
-
offsetParent !== null判断元素是否真实可见（排除display: none等隐藏状态） - 若元素在异步组件中（如 Vue/React 的 useEffect 或 mounted 钩子），确保 DOM 已实际挂载再调用
focus() - 部分浏览器（如 Safari）要求
focus()必须由用户手势触发才能唤出软键盘，否则仅聚焦但不弹出键盘——这是安全策略，无法绕过
真正要实现“挂载即聚焦”，autofocus 是个快捷但脆弱的开关；而 focus() 才是可控的执行动作。别指望一个属性解决所有场景，尤其当涉及条件渲染、延迟加载或移动端交互时。
