autofocus 会强制抢占焦点且不触发 focus 事件，导致体验断裂、逻辑失效、ios 失效及多元素行为不可控；应改用受控的 js focus() 并做存在性、抢占、时机和滚动四层防护。
autofocus 会破坏用户当前焦点，且不触发 focus 事件
它不是“安全聚焦”，而是粗暴抢占。浏览器一旦执行 autofocus，就会把 document.activeElement 强制设为目标元素，不管用户正在操作哪个输入框、是否刚点开下拉菜单、甚至是否在阅读一段文字——焦点瞬间跳走，无提示、无过渡、不可撤销。
更关键的是：autofocus 不会触发 focus 或 focusin 事件，所有依赖该事件的逻辑（如高亮边框、表单校验初始化、分析埋点）全部失效。你写了 input.addEventListener('focus', handler)，但 autofocus 激活时，handler 根本不会执行。
- 用户正在填写上一个表单，页面跳转后新页
autofocus立刻抢走焦点 → 输入中断，体验断裂 - 页面含多个可聚焦区域（如导航菜单 + 搜索框），
autofocus让搜索框抢跑 → 屏幕阅读器先读输入框，跳过 banner 和标题 - SPA 中路由切换后组件重挂载，
autofocus在 DOM 已存在时无效，但开发者误以为“写了就有用”，实际焦点丢失
多个 autofocus 元素共存时行为不可控
HTML 规范只要求浏览器对第一个被解析到的 autofocus 元素生效，其余静默忽略。但“第一个”取决于源码顺序，而非渲染顺序、CSS 显示状态或组件生命周期。
典型翻车现场：<dialog><input autofocus></dialog> 写在 HTML 底部，但页面顶部有个 <input autofocus> —— 即使顶部那个被 display: none 包裹，它仍被解析、仍被选中、仍抢走焦点。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- Vue/React 中用
v-if或条件渲染控制弹窗，但 SSR 输出里多个弹窗模板都带autofocus→ 只有最先解析的那个生效，与用户看到的弹窗完全无关 - 服务端返回 HTML 片段插入
innerHTML，哪怕片段里只有 1 个autofocus，也无效 —— 因为不是初始解析流的一部分 - 多个模态框同时存在于 DOM（如嵌套或快速切换），浏览器可能聚焦已关闭弹窗里的旧 input，导致焦点落在不可见区域
iOS Safari 下 autofocus 基本形同虚设
这不是兼容性问题，是 Apple 主动限制：任何非用户手势同步上下文中的自动聚焦，都会被静默拒绝。页面加载、后台切前台、iframe 加载、路由跳转……全都不行。
结果就是：你写好了 <input type="text" autofocus>，在 iOS Safari 里既不聚焦，也不弹键盘，连 document.activeElement 都没变 —— 浏览器连日志都不打，纯静默失败。
- SPA 中点击菜单项 → 触发路由 → 组件挂载 →
autofocus失效（链路脱离原始 click 上下文） - 用
setTimeout(() => input.focus(), 0)补位？依然失败 —— setTimeout 是异步微任务，不在手势同步栈内 - 唯一可行路径：必须由用户点击/触摸直接触发
input.focus()，例如button.addEventListener('click', () => input.focus())
替代方案不是“要不要用”，而是“怎么安全地用 focus()”
放弃 autofocus 不代表放弃自动聚焦。关键是把控制权收回来，用 JS 显式调用 focus()，并做四层防护：
- 检查元素是否存在且未被禁用：
if (el && !el.disabled && el.offsetParent !== null) - 确认未被其他元素抢占：
if (document.activeElement !== el) - 确保时机可靠：Vue 用
nextTick，React 用useEffect+ref，避免 DOM 还没渲染就调用 - 防止滚动干扰：
el.focus({ preventScroll: true })，尤其在模态框中避免页面意外跳动
真正容易被忽略的，是焦点残留问题：关闭弹窗时不手动 blur()，会导致 Tab 键仍在旧 input 上循环，而视觉上它早已消失。这比聚焦失败更难排查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
