autofocus常失效因时机、状态或平台限制；onfocus="this.select()"失败主因是dom未就绪或输入框不可编辑；focus()需配scrollintoview防ios遮挡；去outline须保留可访问性焦点反馈。
input 获取焦点时的行为不能只靠 autofocus 或内联 onfocus 一写了之；多数失效不是代码错，而是时机、状态或平台限制没被满足。
autofocus 属性为什么经常不生效
它只在 HTML 文档首次解析时起作用，且有严格前提：
- 元素必须是原生可聚焦控件（
<input type="text">、<textarea></textarea>等），<input type="hidden">或disabled元素加了也静默忽略 - 元素初始必须可见：包裹在
display: none、visibility: hidden或inert容器中，浏览器直接跳过 - 同一页面多个
autofocus，仅 DOM 顺序第一个生效；Vue/React 组件里写autofocus基本无效——SSR 渲染后已错过解析时机 - iOS Safari 几乎总是忽略它，为防止非手势触发键盘弹出，这是策略性限制，不是 bug
onfocus="this.select()" 失效的常见原因
看似一行代码就能全选文本，但实际执行依赖 DOM 就绪和可编辑状态：
- 内联写法
onfocus="this.select()"在 Vue/React 动态挂载后常失败，因为事件绑定时this可能还没真正获得焦点，或 DOM 尚未完成渲染 - 输入框若初始为
readonly或disabled，select()会静默失败，不报错也不生效 - 值为空字符串时调用
select()无视觉效果，这不是问题，是预期行为 - 移动端软键盘弹出延迟可能导致
select()被截断，需配合$nextTick（Vue）或useEffect（React）确保时机
focus() 和 select() 必须配合 scrollIntoView 使用
iOS 下 input 获焦后常被虚拟键盘遮挡，尤其固定定位的 footer 输入框。光调 focus() 不够：
- 必须在
focus()后立即调用scrollIntoView({ block: 'nearest' })，否则视口不会自动调整 - 不要用
scrollIntoView(true)（已废弃），推荐传对象参数，block: 'nearest'更兼容 iOS 行为 - 若 input 在滚动容器内（如
overflow: auto的 div），需对父容器调用scrollIntoView，而非document.body - 部分 iOS 版本在中英文切换时仍会偏移，此时可加
setTimeout(() => input.scrollIntoView(), 100)作二次兜底
去掉焦点边框却影响可访问性怎么办
用 outline: none 确实能消除默认蓝边，但会破坏键盘用户的焦点指示：
- 必须同时提供替代视觉反馈，例如：
input:focus { border-color: #007BFF; outline: none; } - 不要全局重置所有
:focus，只针对明确不需要 outline 的场景（如按钮图标） - 若用
tabindex="-1"临时移除可聚焦性，记得后续恢复，否则屏幕阅读器无法操作 - Bootstrap 等框架中，
.btn:focus类常带box-shadow替代 outline，这是更合理的做法
真正关键的不是“怎么写”，而是“什么时候写”和“写给谁看”——autofocus 是给首次加载的，focus() 是给 JS 控制流的，select() 是给用户意图的，而 scrollIntoView 是给 iOS 的。漏掉任一环，体验就断在那儿了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
