autofocus 属性在绝大多数实际场景中都不可靠，尤其是涉及动态渲染、SPA、模态框或 iOS Safari 时——它只在原始 HTML 解析阶段起一次作用，之后完全失效。
autofocus 只对初始 HTML 中的可见可聚焦元素生效
浏览器只在解析 DOM 树那一刻扫描 autofocus，后续任何 JS 操作（如 innerHTML 替换、appendChild()、Vue/React 组件挂载）都不会触发它。这意味着：
-
document.getElementById('form').innerHTML = '<input type="text" autofocus>'→ 焦点不会出现 -
input.autofocus = true或input.setAttribute('autofocus', '')→ 完全无效 - 服务端渲染（SSR）后 hydration 的
<input autofocus>→ 不会聚焦，因为 DOM 已存在 - 页面从后台标签页切回、或 iframe 内加载 → Safari 会静默丢弃该行为
哪些 input 类型真正支持 autofocus
必须同时满足：可聚焦 + 可交互 + 未被禁用。常见情况如下：
- ✅ 稳定支持：
<input type="text">、<input type="search">、<input type="email">、<textarea> - ⚠️ 有条件支持：
<button>（Chrome/Firefox 行为一致，Safari 偶尔跳过）、<select>（Firefox 和旧版 Safari 明确不支持） - ❌ 不支持：
<input type="hidden">、<input type="checkbox">、<input type="file">、<input disabled>、<div tabindex="0">（除非显式加tabindex="0"） - 隐藏即失效：
display: none、visibility: hidden、inert或tabindex="-1"包裹的元素，autofocus直接被跳过
移动端 Safari 几乎总是静默忽略 autofocus
iOS Safari 主动限制非用户手势触发的自动聚焦，目的是防止软键盘意外弹出遮挡内容。结果是：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 首页
<input autofocus>→ 键盘大概率不弹，焦点可能设了但不可见 - 模态框
show()后的autofocus→ 失效，除非聚焦调用包裹在onclick或ontouchend回调里 -
.focus()在用户手势后调用才安全，例如：button.addEventListener('click', () => input.focus()) - 即使聚焦成功，
.focus({ preventScroll: true })才能避免页面滚动，而autofocus没这个能力
更靠谱的做法：JS 显式 focus() 并加防护逻辑
只要不是纯静态页面，都应该放弃 autofocus，改用 JS 控制。关键不是“能不能调”，而是“什么时候调、是否安全”：
- 原生 JS：监听
DOMContentLoaded，检查document.activeElement !== input再调用input.focus() - React：用
useEffect(() => { inputRef.current?.focus() }, [])，并包裹if (typeof window !== 'undefined')防 SSR 报错 - Vue 3：在
onMounted中调用inputRef.value?.focus()，确保v-if已为true - 加一层防御判断更稳妥：
if (input && document.activeElement !== input) input.focus()，避免覆盖用户已手动聚焦的元素
真正要注意的是：别假设 autofocus 一定成功，尤其在混合渲染、多 tab 切换或辅助技术环境下。iOS 上最隐蔽的坑是——它不报错、不抛异常，只是静默失败。
