autofocus仅对原生可聚焦且处于可交互状态的表单元素有效，如text、email、textarea、select、button等；在ios safari中静默失效，动态插入、隐藏、禁用或非可聚焦元素上均无效。
autofocus 属性在多数桌面浏览器中能直接生效，但 iOS Safari 会静默忽略，且动态插入、隐藏、禁用或非可聚焦元素上一律无效——它不是“写上就管用”，而是“满足全部条件才触发”。
autofocus 只对哪些元素有效
浏览器只识别原生可聚焦的表单控件，且必须处于可交互状态：
-
<input type="text">、<input type="email">、<input type="search">、<input type="number">✅（type="password"在部分 Android 浏览器中会被跳过） -
<textarea></textarea>、<select></select>、<button></button>✅（注意：<select></select>在旧版 Firefox 和 IE9- 不支持） -
<input type="hidden">、<input type="checkbox">、<div>、<code><p></p>❌（即使加了tabindex="0"，autofocus本身也不起作用） -
<input disabled autofocus>、<input readonly autofocus>、<input style="display:none" autofocus>❌（任一条件不满足即失效） - 写在动态渲染内容里（Vue/React 组件挂载后、
innerHTML插入后）→autofocus被完全忽略 - 元素被
display: none或visibility: hidden包裹 → 浏览器跳过该元素 - 页面中有多个
autofocus→ 只有第一个被解析的元素可能生效，其余静默丢弃 - iOS Safari 下无论怎么写都无效 → 这是平台策略，不是 bug
- 想验证是否真触发？打开 DevTools → Elements 面板 → 看目标元素是否带
:focus伪类，或监听focus事件确认 - 必须是布尔属性，只写
autofocus即可，autofocus="true"、autofocus=""合法但多余，_autofocus或data-autofocus完全无效 - 必须出现在原始 HTML 源码中，
el.setAttribute('autofocus', '')或input.autofocus = true无任何效果 - 仅在页面**首次加载**时生效一次，刷新后重来，但路由切换（SPA）不算“新页面”，不会再次触发
- 一个页面建议只设一个，避免焦点抢占干扰屏幕阅读器用户，也防止某些浏览器行为不一致
- 使用 Next.js/Nuxt/Vite-SSR → 服务端没有 DOM，
autofocus在 SSR 阶段被忽略 - 目标元素在 modal 或 tab 切换后才显示 → 必须等可见后再调用
.focus() - iOS 设备需软键盘弹出 → 必须绑定到用户手势（如
click、touchend）后调用，否则被拦截 - 需要根据 URL 参数、登录态等条件判断是否聚焦 →
autofocus是静态声明，无法做逻辑分支
autofocus 常见失效原因和验证方式
它不是 JS，不执行、不报错、不重试，只在 HTML 解析阶段“看一眼”就决定是否聚焦。失效时往往毫无提示：
autofocus 的正确写法和硬性限制
语法极简，但容错为零：
什么时候必须放弃 autofocus，改用 JS focus()
只要项目涉及以下任一场景，纯 HTML 方案就不可靠：
安全的 JS 写法示例：
document.addEventListener('DOMContentLoaded', () => {
const input = document.querySelector('input[name="search"]');
if (input && document.activeElement !== input) {
input.focus();
}
});关键点：检查 document.activeElement，避免覆盖用户当前输入；SPA 中应监听路由变化而非仅依赖 DOMContentLoaded。真正容易被忽略的是：autofocus 不等于“用户一定会看到光标”，它只是把焦点交给浏览器处理。而浏览器是否真的让光标停在那里，取决于元素是否已挂载、是否可见、是否被扩展程序劫持、甚至取决于 macOS 的粘滞键设置。
