autofocus仅在HTML初始解析时生效，动态插入或框架渲染的输入框需用focus()配合正确时机；聚焦后应调用scrollIntoView确保可见，并优先使用label for实现更可靠的点击聚焦。
autofocus 属性只在 HTML 初始解析时生效，动态插入的表单控件、SPA 页面、Vue/React 渲染的输入框基本无效；真正可靠的自动聚焦必须靠 focus() + 时机控制。
autofocus 为什么经常不工作
浏览器只在 DOM 解析阶段扫描并激活第一个带 autofocus 的可聚焦元素。这意味着：
- 用
innerHTML、appendChild或框架（如 Vue 的v-if）动态添加的<input autofocus>完全被忽略 - 移动端 Safari 和部分 Android 浏览器会主动禁用
autofocus，尤其在非用户手势触发的上下文中（比如页面 onload） - 同一页面多个
autofocus时，仅第一个被解析的元素生效；后续的会被跳过 -
input[type="hidden"]、disabled元素、无id的label绑定目标，均不支持autofocus
focus() 调用时机不对 = 白写
直接在 DOMContentLoaded 里调 document.getElementById("xxx").focus() 很容易失败——元素可能还没挂载、CSS 还没应用、框架状态未就绪。常见补救方式：
- 对纯静态页：用
window.addEventListener("load", () => { ... })比DOMContentLoaded更稳妥（等资源加载完） - 对 Vue：在
nextTick回调中调用this.$refs.inputRef.focus()，确保虚拟 DOM 已渲染 - 对 React：在
useEffect(() => { ref.current?.focus(); }, [])中执行，且 ref 必须绑定到真实 DOM 节点 - 通用兜底：加
setTimeout(() => el.focus(), 50)，100ms 内通常足够，但别超过 200ms
聚焦后看不见？scrollIntoView 是刚需
用户点击“编辑”弹出一个底部表单，focus() 成功了，但输入框被折叠内容或固定头部遮住——这是高频体验断点。必须显式滚动：
立即学习“前端免费学习笔记（深入）”；
- 用
el.scrollIntoView({ behavior: "smooth", block: "center" })让元素居中可见 - 若元素在
overflow: hidden容器内，需先对容器调用scrollIntoView，或手动计算并设置scrollTop - 无障碍场景下，
scrollIntoView同时提升屏幕阅读器定位准确性 - 注意：Safari 对
behavior: "smooth"支持较晚，生产环境建议降级为"auto"或加特性检测
label for 点击聚焦比 autofocus 更可控
当「点击文字聚焦输入框」是核心交互（比如登录页邮箱字段旁的「邮箱」标签），优先用 label + for，而不是依赖 autofocus：
-
label的for值必须与目标input的id完全一致（区分大小写、不可含空格） - 支持所有可聚焦控件：
input[type="text"]、textarea、select、input[type="radio"] - 即使输入框初始
display: none，只要点击 label，它仍会临时显示并获得焦点（前提是未被disabled） - 比 JS 聚焦更轻量、零延迟、天然兼容键盘 Tab 导航和屏幕阅读器
真正难的不是让某个输入框聚焦，而是判断「此刻该不该聚焦」「聚焦后用户能不能立刻看到并操作」——时机、可见性、可访问性，三者缺一不可。
