17370845950

autofocus 属性仅在 HTML 初始解析时对单个可聚焦表单控件生效，不支持动态添加或 JS 赋值；SPA 中需用 JS 主动 focus()，且移动端常受限，应结合用户交互触发。

autofocus 属性在页面加载时自动将焦点设到指定的 、 或 元素上，但它的行为受浏览器策略和 DOM 加载时机影响，并非总能如预期生效。

autofocus 只能用在单个元素上，且必须是可聚焦元素

HTML5 规范明确限定：autofocus 是布尔属性，只能出现在一个表单控件中；重复使用（比如多个 input autofocus）时，只有第一个被解析的元素会获得焦点。它不支持动态添加或 JS 赋值（el.autofocus = true 无效）。

常见可聚焦元素包括：

• 、 等非禁用（disabled）的输入类型
• （含 type="submit" / "button"）
• （部分浏览器支持，但不推荐依赖）

以下写法无效：

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.addEventListener('click', () => {
  input.focus();
  // 可选：唤出软键盘（仅当 input 已可见且未被遮挡）
  input.select(); // 提高兼容性
});

真正要让输入框“一上来就可用”，不能只靠 autofocus 属性 —— 它只是个提示，不是保证。DOM 就绪、用户权限、平台策略、软键盘触发时机，每个环节都可能打断这个流程。