autofocus仅在HTML初始解析时生效，模态框、Vue/React动态组件及iOS Safari中常静默失效，必须用JS在DOM就绪、元素可见且用户手势上下文中调用focus()并校验可聚焦性。
直接加 autofocus 属性最简单，但多数实际场景下它会静默失效——比如模态框、Vue/React 动态组件、移动端 Safari，这时必须用 JS 主动调用 focus()。
autofocus 属性为什么有时不生效
它只在元素初始渲染时触发，且依赖 DOM 已挂载、可见、未被禁用。常见失效场景包括：
-
display: none或visibility: hidden状态下添加autofocus，浏览器直接忽略 - 模态框通过 JS 动态
appendChild或切换 class 显示，autofocus不会被重新激活 - iOS Safari 在非用户手势触发的弹窗中（如页面加载后自动 show），常聚焦但不弹软键盘
- 同一页面多个
autofocus，只有第一个解析到的生效，其余被丢弃
focus() 方法该在什么时候调用
关键不是“写了 focus()”，而是“写在 DOM 真实就绪之后”。错误写法：document.getElementById('search').focus() 放在 script 标签顶部；正确时机取决于上下文：
- 静态 HTML：用
DOMContentLoaded事件包裹，确保 DOM 解析完成 - Vue 组件：在
mounted钩子内调用，再包一层setTimeout(() => input.focus(), 0)防渲染未完成 - React 函数组件：在
useEffect中调用，同样建议加setTimeout微任务延迟 - 动态插入的元素（如
modal.appendChild(input)）：必须等插入完成、样式计算完毕（offsetParent !== null）再调用
input 获得焦点后怎么自动选中全部内容
仅靠 focus() 不够，还得在获得焦点后立刻执行 select()。但直接写 input.addEventListener('focus', () => input.select()) 在 Chrome/Safari 某些组合下会失效——光标到位，文字不选中。
立即学习“前端免费学习笔记（深入）”；
- 根本原因是浏览器对非用户触发的
select()有拦截策略，尤其在标签页切换或 JS 批量执行时 - 稳妥写法是加
setTimeout：input.addEventListener('focus', () => setTimeout(() => input.select(), 0)) -
requestAnimationFrame不推荐，它比setTimeout(fn, 0)更晚，常错过焦点激活窗口 - 对
type="number"或type="date"不要调用select()，它们不支持文本选中逻辑 - textarea 同样适用
select()；contenteditable元素需用getSelection().selectAllChildren(el)，但兼容性差，尽量避免
移动端软键盘不弹出怎么办
聚焦成功但软键盘没出来，不是 bug，是浏览器安全策略：Chrome/iOS Safari 要求软键盘必须由**用户手势**（click/tap）触发才允许弹出。JS 自动 focus() 只能设置焦点，不能强制唤起键盘。
- 唯一可靠解法：把
focus()放在用户事件回调里，例如button.onclick = () => input.focus() - 若必须程序触发（如路由跳转后自动聚焦），可尝试
input.focus({ preventScroll: true })，但旧版浏览器不支持该选项 - 不要依赖
autofocus期望移动端自动弹键盘，它在 iOS 上行为极不稳定 - 测试时务必真机验证，模拟器和桌面 Chrome 的表现与真实 iOS 完全不同
最容易被忽略的是：动态渲染场景下既没等 DOM 就绪，又没加 setTimeout 延迟 select()，结果在部分 iOS 设备上光标闪了但文字不选中——功能看似正常，实则对用户无效。
