autofocus仅在HTML初始解析时生效，是浏览器一次性动作；动态添加无效，且仅原生可聚焦表单控件支持，iOS Safari中基本不可靠，需JS补位并谨慎判断时机。
autofocus 属性只在 HTML 初始解析时生效
它不是 JS 可控制的动态行为，而是浏览器在解析 HTML 文档流过程中识别并执行的一次性动作。一旦 DOM 构建完成，再通过 el.setAttribute('autofocus', '') 或 el.autofocus = true 添加该属性，完全无效。
常见失效场景包括：
- Vue/React 组件中写
<input autofocus>—— SSR 渲染或 hydration 后 DOM 已存在，autofocus 被跳过 - 用
innerHTML或appendChild动态插入表单 —— 新增元素不触发重新解析，autofocus 被忽略 - 页面从后台标签页切回时加载 —— Safari 等浏览器会静默丢弃 autofocus
哪些元素真正支持 autofocus？
只有原生可聚焦且未被禁用的表单控件才有效，且支持程度因浏览器而异：
-
<input type="text">、<input type="email">、<input type="search">：全平台稳定支持 -
<textarea>：全平台支持 -
<button>：Chrome/Firefox 支持，Safari 有时忽略 -
<select>：Chrome/Edge 支持，Firefox 和旧版 Safari 不支持（错误信息：autofocus is not supported on <select>） -
<input type="hidden">或disabled元素：直接无效，不报错但无反应 -
<div tabindex="0">：加了tabindex也不行 —— autofocus 不作用于非表单控件，即使它能被 focus()
iOS Safari 中 autofocus 基本不可靠
它会在多数自动加载场景下静默忽略，尤其当页面没有用户手势上下文（比如非点击触发的导航）时。这不是 bug，是 Apple 的主动限制，防止软键盘意外弹出遮挡内容。
立即学习“前端免费学习笔记（深入）”；
必须用 JS 补位，且要注意时机和容错：
- 不能只写
input.focus()，得先检查是否已被占用：if (input && document.activeElement !== input) - 避免在
blur回调里立即focus()，可能被浏览器拦截或引发循环 - SPA 中推荐在框架生命周期钩子里调用：React 用
useEffect(() => ref.current?.focus(), [])，Vue 用onMounted(() => inputRef.value?.focus()) - 不要用
setTimeout(() => focus(), 0)硬等 —— 容易和原生 autofocus 冲突，造成两次聚焦抖动
多个 autofocus 元素不会报错，但行为不可控
HTML 规范只要求浏览器对第一个被解析到的 autofocus 元素生效，其余全部忽略。问题在于：这个“第一个”取决于源码顺序，而非渲染顺序或 CSS 显示状态。
容易踩的坑：
- 模态框里写了
autofocus，但它的 HTML 在页面底部 —— 实际聚焦的是顶部某个搜索框 - 用
display: none隐藏了带 autofocus 的元素，它仍参与“首个”判定，但最终无法获得焦点，也不报错 - 密码管理器、翻译插件等第三方脚本可能劫持焦点，导致 autofocus 表面失效，排查困难
- 屏幕阅读器虽尊重 autofocus，但如果聚焦在密码框或次要字段，反而破坏可访问性流程
真正关键的不是“怎么让它生效”，而是“它什么时候不该生效”——比如用户已开始交互、页面尚未可视、或当前上下文不适合弹出键盘。这些判断只能靠 JS 完成，autofocus 只是个弱信号。
