autofocus 失效的根本原因是浏览器仅在首次加载时对初始 HTML 中存在、未被移除且未被 JS blur 的 input 触发聚焦；动态插入、CSS 隐藏、disabled/readonly、SSR 或 iOS Safari 均导致其失效，应改用 useRef + useEffect.focus() 或用户手势触发的 .focus()。
input autofocus 为什么没生效
常见现象是加了 autofocus 属性，页面一打开光标却不在输入框里。根本原因通常是：浏览器只对**首次加载时未被移除、且未被 JS 主动 blur 的 <input> 元素**触发自动聚焦；如果元素在 DOM 中动态插入（比如 Vue/React 渲染后才挂载）、或被 CSS 隐藏（display: none 或 visibility: hidden），autofocus 就直接失效。
实操建议：
-
autofocus必须写在 HTML 源码中，不能靠 JS 动态 setAttribute 添加 - 确保该
<input>在页面初始 HTML 中就存在，且没有disabled或readonly（哪怕只是临时的） - 避免用
display: none控制显隐——改用opacity: 0; pointer-events: none;或position: absolute; left: -9999px;替代 - 若用框架（如 React），别依赖
autofocus，改用useRef+useEffect调用.focus()
autofocus 和 JavaScript focus() 的区别
autofocus 是 HTML 原生行为，由浏览器在解析阶段决定；而 .focus() 是 JS 运行时调用，可控性更强，但也更易出错。
关键差异：
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
autofocus不会触发focus事件（某些旧版 Safari 除外），而.focus()会 -
.focus()在元素不可见、被禁用、或不在 document 流中时会静默失败（无报错但无效果） -
.focus({ preventScroll: true })可阻止页面自动滚动到该元素，autofocus没这个选项 - 移动端 iOS Safari 对
autofocus支持极差（基本忽略），必须用 JS.focus()+ 用户手势上下文（比如点击按钮后立刻 focus）才能生效
如何让 autofocus 在单页应用（SPA）里可靠工作
Vue/React/Angular 等框架下，HTML 初始加载时目标 <input> 往往还没渲染出来，autofocus 形同虚设。
实操方案（以 React 为例）：
- 用
useRef绑定 input 元素 - 在
useEffect中调用ref.current?.focus()，并加防错判断：if (ref.current && document.activeElement !== ref.current) - 避免在服务端渲染（SSR）场景下直接调用
.focus()—— 会报document is not defined，需包裹if (typeof window !== 'undefined') - 若路由切换后需要聚焦（比如从列表页进详情页带搜索框），不要依赖组件挂载，改用
useLocation监听路径变化再 focus
移动端 iOS Safari 的 autofocus 特殊处理
iOS Safari 完全无视 autofocus 属性，这是明确的平台限制，不是 bug。
能用的路子只有这一条：必须在用户真实交互（click/tap/touchend）触发的同步代码流中调用 .focus()。
- 例如：给“编辑”按钮绑定
onClick={() => { inputRef.current?.focus(); }}，而不是在组件 mount 后 setTimeout 调用 - 不能跨事件循环——
setTimeout(() => input.focus(), 0)会失败 - 表单 submit 后想重新聚焦？得在
onSubmit回调里同步 focus，不能等状态更新完再做 - 如果要“页面打开即聚焦”，只能引导用户点一下屏幕某处（比如一个透明 overlay），再在 handler 里 focus，否则无解
真正麻烦的从来不是怎么写 autofocus，而是它在哪些条件下不工作、以及为什么 JS focus 也经常失灵——尤其当涉及 SSR、动态渲染、iOS 或无障碍访问时，光靠属性远远不够。
