autofocus属性需写为autofocus（不赋值）才最规范，仅对可聚焦的原生元素在HTML初始解析时生效，动态渲染或移动端常失效，推荐用JS的.focus()配合时机判断实现可靠聚焦。
直接让光标落在关键输入框上，能省掉用户一次点击，尤其在登录页、搜索页或弹窗表单里，操作路径更短、反馈更即时。
autofocus 属性怎么写才有效
- 它是布尔属性，不赋值最规范：
<input type="text" name="q" autofocus> - 兼容 XHTML 可写成：
<input autofocus="autofocus"> - 别写
autofocus="true"或autofocus=""，这些写法虽不报错，但不符合标准，部分解析器可能忽略
只对原生可聚焦且可用的元素生效：
✅ <input type="text">、<input type="email">、<input type="search">、<textarea>、<button>
⚠️ <select> 在 Chrome/Edge 中支持，Firefox 和旧 Safari 基本不响应
❌ <input type="hidden">、<input disabled>、<input style="display:none">、<div tabindex="0"> —— 加了也无效
为什么有时 autofocus 没反应
- 页面是 Vue/React 渲染的，或者表单靠 JS 动态插入（比如
innerHTML = '...'），autofocus 就被跳过——它只在 HTML 初始解析时起作用 - 元素被
display: none包裹、设了disabled、或父级用了inert，浏览器直接绕过 - iOS Safari 主动禁用 autofocus，防止非用户触发的键盘弹出；Android Chrome 也越来越严格
- 同一页面多个
autofocus，只有 DOM 中第一个生效，其余被忽略，还可能干扰屏幕阅读器
真正提升体验的可靠做法
立即学习“前端免费学习笔记（深入）”；
放弃依赖 autofocus，改用 JS 在合适时机调用 .focus()，并加必要判断：
- 等 DOM 加载完成：监听
DOMContentLoaded - 确保元素存在且没被用户抢先点中：
if (input && document.activeElement !== input) - 模态框场景下，在
shown或mounted钩子后聚焦（Vue 的onMounted，React 的useEffect(() => ref.current?.focus(), [])） - 移动端兜底：绑定一次
click或touchstart事件，在回调里立即.focus()，这样键盘大概率能弹出
别忽略的小细节
- 自动聚焦不是“越快越好”，首页顶部搜索框一打开就聚焦，可能打断用户浏览正文
- 表单重置后焦点丢失？监听
reset事件，重置完再手动.focus() - 聚焦后页面自动滚动？用
.focus({ preventScroll: true })控制，autofocus 不支持这个选项 - 屏幕阅读器会按 autofocus 跳转，如果页面顶部有重要提示，建议提供“跳过导航”链接
不复杂但容易忽略
