autofocus 属性仅在 HTML 初始解析时对单个可聚焦表单控件生效，不支持动态添加或 JS 赋值；SPA 中需用 JS 主动 focus()，且移动端常受限，应结合用户交互触发。
autofocus 属性在页面加载时自动将焦点设到指定的 <input>、<textarea> 或 <button> 元素上，但它的行为受浏览器策略和 DOM 加载时机影响，并非总能如预期生效。
autofocus 只能用在单个元素上，且必须是可聚焦元素
HTML5 规范明确限定：autofocus 是布尔属性，只能出现在一个表单控件中；重复使用（比如多个 input autofocus）时，只有第一个被解析的元素会获得焦点。它不支持动态添加或 JS 赋值（el.autofocus = true 无效）。
常见可聚焦元素包括：
-
<input type="text">、<input type="email">等非禁用（disabled）的输入类型 <textarea>-
<button>（含type="submit"/"button"） -
<select>（部分浏览器支持，但不推荐依赖）
以下写法无效：
立即学习“前端免费学习笔记（深入）”；
<input type="hidden" autofocus> <input type="text" disabled autofocus> <div tabindex="0" autofocus></div> <!-- 不是表单控件，autofocus 不起作用 -->
autofocus 在 SPA 或动态渲染页面中大概率失效
因为 autofocus 是 HTML 解析阶段触发的，只对初始 HTML 中已存在的元素生效。如果你用 Vue/React 渲染表单，或通过 innerHTML、appendChild 动态插入输入框，autofocus 属性会被忽略。
此时必须改用 JS 主动聚焦：
document.addEventListener('DOMContentLoaded', () => {
const input = document.querySelector('#search-input');
if (input && document.activeElement !== input) {
input.focus();
}
});注意加 document.activeElement !== input 判断，避免在已有焦点（如用户刚点过其他地方）时强行覆盖，影响可访问性。
移动端 Safari 和 Chrome 对 autofocus 有严格限制
iOS Safari 默认禁用所有 autofocus（无论是否在用户手势后），除非发生在用户主动交互（如点击按钮）后的微任务中。Android Chrome 也逐步收紧策略，尤其在 iframe 或非主文档上下文中。
安全可靠的替代方案是绑定一次点击/触摸事件后调用 focus()：
<button onclick="document.getElementById('login-username').focus()">开始登录</button>
<input id="login-username" type="text">或者更现代的做法：
button.addEventListener('click', () => {
input.focus();
// 可选：唤出软键盘（仅当 input 已可见且未被遮挡）
input.select(); // 提高兼容性
});真正要让输入框“一上来就可用”，不能只靠 autofocus 属性 —— 它只是个提示，不是保证。DOM 就绪、用户权限、平台策略、软键盘触发时机，每个环节都可能打断这个流程。
