自动聚焦需谨慎使用，仅适用于用户进入页面后首要操作即为输入的场景，如独立搜索页、登录页、模态框及表单后续步骤；避免打断用户意图或影响可访问性。
自动聚焦能减少用户一次点击，让操作更连贯，但效果取决于场景是否匹配、实现是否稳妥，不是加个 autofocus 就万事大吉。
适合用自动聚焦的典型页面
核心原则：用户进入页面后的第一件事，大概率就是在这个框里输入。
- 独立搜索页（如
/search）、纯登录/注册页——光标已在用户名框，用户直接敲键盘 - 弹出式模态框（如“新建笔记”“快速评论”）——避免用户再点一次才聚焦
- 表单流程中的后续步骤（如第二步邮箱验证，页面加载即聚焦验证码输入框）
容易适得其反的常见情况
自动聚焦若打断用户当前意图，反而降低体验。
- 首页顶部放搜索框却默认聚焦——用户正想看导航或 banner，键盘突然弹出遮挡内容
- 含重要提示或错误信息的页面（如密码重置失败页），焦点跳走可能让用户错过关键文案
- 移动端横屏/小屏下，软键盘弹出会挤占大量可视区域，尤其在表单靠近页面底部时
真正起作用的实现方式
原生 autofocus 只在静态 HTML 首次解析时生效，而现代页面大多动态渲染、有路由切换、需兼容 iOS。靠它不可靠，必须配合 JS。
- 用
DOMContentLoaded或框架的挂载钩子（如 React 的useEffect、Vue 的onMounted）触发.focus() - 聚焦前检查
document.activeElement !== input，避免覆盖用户已手动点选的其他输入框 - 对 iOS 等限制严格的环境，可绑定一次
click或touchstart事件后再调用.focus()，确保在用户手势上下文中执行 - 加上
.focus({ preventScroll: true })，防止页面意外滚动到输入框位置，干扰阅读流
兼顾可访问性的细节
屏幕阅读器会按 autofocus 跳转焦点，这本是优势，但也需配套设计。
- 如果自动聚焦的输入框不在视觉顶部，建议在它前面加“跳至主内容”链接，并设
tabindex="-1"便于跳过 - 避免多个 autofocus 元素共存——规范只认第一个，其余被忽略，还可能打乱辅助技术的阅读顺序
- 禁用状态（
disabled）、隐藏状态（display: none）下的元素加 autofocus 无效，且不报错，容易埋下隐患
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
