autofocus在模态框中基本不生效，因其仅在html初始解析时触发，而模态框多为动态渲染或隐藏状态；必须用element.focus()手动聚焦，且需满足元素已挂载、可见、未禁用三前提。
autofocus在模态框里基本不生效，别指望它自动聚焦
模态框（modal）中写 autofocus 属性，99% 的情况不会触发聚焦——不是你漏写了，是浏览器压根没处理。因为 autofocus 只在 HTML 初始解析阶段扫描并执行一次，而模态框通常是 display: none 状态下渲染的，或者通过 JS 动态插入/显示，此时 DOM 已完成解析，属性形同虚设。
常见错误现象包括：
- 模态框用
v-if或*ngIf控制显隐，autofocus在首次显示时静默忽略 - JS 执行
modalEl.style.display = 'block'后，<input autofocus>仍无反应 - iOS Safari 下哪怕模态框已 visible，软键盘也不弹，光标不动
必须用 element.focus()，但得卡准时机和条件
手动调用 focus() 是唯一可靠路径，但直接在 showModal() 后立刻执行往往失败。关键在于三个前提同时满足：元素已挂载、可见、未被禁用。
实操建议：
- 确保模态框 DOM 已真实插入文档（如 React 用
useEffect(() => { inputRef.current?.focus() }, [])，Vue 3 用onMounted(() => inputRef.value?.focus())） - 避免在
setTimeout中盲目延迟，优先监听transitionend或animationend（如果模态框有淡入动画） - 加一层安全校验：
if (input && document.activeElement !== input) input.focus()，防止覆盖用户正在操作的其他输入框 - iOS Safari 必须绑定到用户手势回调中：比如在“打开模态框”按钮的
click或touchstart事件里，紧接调用input.focus()
哪些元素能真正获得焦点？别给错类型或加错状态
autofocus 和 focus() 都受元素可聚焦性约束，不是所有 <input> 都行。
✅ 安全可用：
-
<input type="text">、<input type="email">、<input type="search"> -
<textarea></textarea>、<button></button>
⚠️ 有条件支持：
-
<select></select>：Chrome/Edge 可以，Firefox 和旧 Safari 常忽略（错误信息：autofocus is not supported on <select></select>）
❌ 完全无效：
-
<input type="hidden">、<input type="checkbox">、<input type="file"> -
<input disabled>、<input style="display:none">、父容器含inert属性
移动端软键盘遮挡问题比聚焦本身更难解
即使 focus() 成功，iOS 和部分 Android 设备上软键盘可能把输入框顶出可视区，尤其当模态框用 position: fixed 或页面缩放时。
缓解策略：
- 聚焦前滚动到输入框位置：
input.scrollIntoView({ block: 'nearest', inline: 'nearest' }) - 避免在
fixed容器内放输入框；改用absolute+transform或 CSSscroll-margin-top - 不依赖自动弹键盘：iOS 下若用户尚未触发过任何手势，
focus()可能只聚焦不弹键盘，需引导点击后重试
最易被忽略的一点：焦点控制逻辑必须区分“是否已有用户交互”。SPA 页面刚加载完就聚焦，对屏幕阅读器用户可能打断语音流；模态框打开后立即聚焦密码框，反而降低安全性。时机、对象、上下文，三者缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
