应配合 scrollintoview() 并确保 dom 渲染完成后再 focus；聚焦前需校验字段、展开折叠区域、在用户手势中触发，ios 需微任务延迟且禁用 autofocus。
focus() 不触发浏览器默认滚动行为怎么办
直接调用 element.focus() 确实能让元素获得焦点，但很多情况下（比如表单项在视口外、被折叠面板遮挡、或位于长表单底部），页面不会自动滚动到该元素位置，用户根本看不到错误项。
解决办法是配合 scrollIntoView()，但要注意时机和参数：
- 必须等 DOM 渲染完成后再调用，否则可能因元素尚未挂载而失败（尤其在 Vue/React 的响应式更新后）；可使用
setTimeout(() => el.focus(), 0)或el.scrollIntoView({ behavior: 'smooth', block: 'center' })后再 focus - 避免在
input或textarea上同时调用select()—— 这会强制全选文本，干扰用户修改；只对select或带tabindex的容器做focus() - 若表单项被
v-show（Vue）或条件渲染隐藏，需确保它已真实存在于 DOM 中，否则focus()静默失败，无报错
校验后聚焦第一个非法字段的通用逻辑
不能依赖“所有字段都校验完再统一聚焦”，因为用户可能只改了某一项，应只聚焦当前上下文中第一个未通过校验的字段。
实操建议：
- 遍历表单项 DOM 节点时，按 HTML 源码顺序（即 tab index 顺序）查找，用
querySelectorAll('input:not([type="hidden"]), select, textarea')获取候选元素 - 逐个检查其
validity.valid属性（原生校验）或自定义校验函数返回值；遇到第一个false就停止遍历并聚焦 - 对使用 Element Plus 的
<el-form></el-form>，优先调用formRef.validateField(propName, callback)单独校验，再聚焦对应ref元素，比全量校验更轻量 - 避免在提交按钮 click 处理函数里同步聚焦多个字段——只聚焦第一个，其余靠视觉反馈（如红框、错误提示）引导
Element Plus 中 el-form-item 错误状态与 focus 冲突
直接对 <el-form-item></el-form-item> 调用 focus() 无效，因为它不是可聚焦元素；而对内部 <input> 聚焦后，el-form-item 的 is-error 类可能还没更新，导致红框延迟出现。
关键处理点：
- 确保聚焦前，该字段已执行过校验（如调用
formRef.validateField('username')），否则el-form-item不会主动添加is-error - 如果使用
rules配置异步校验（如用户名是否重复），需在异步回调中手动聚焦，不能放在 validate 的 success 回调里——因为 success 表示全部通过 - 不要给
<el-form-item></el-form-item>加tabindex="-1"再聚焦它来“模拟”容器聚焦，这会破坏语义化和键盘导航逻辑
移动端 Safari 对 autofocus 和 focus() 的限制
iOS Safari 在非用户手势（如点击、触摸）触发的 JS 上禁止自动聚焦，这是硬性策略，任何绕过尝试都会静默失效。
必须遵守的约束：
- 聚焦操作必须包裹在用户事件回调内，例如
button.addEventListener('click', () => { input.focus(); })，不能放在mounted或setTimeout里 - 即使在点击后立刻调用
focus()，Safari 也可能因输入法未就绪而失败；稳妥做法是加一个微任务延迟：Promise.resolve().then(() => input.focus()) - 某些 UI 库（如 Element Plus）的
el-input在 iOS 上默认禁用autofocus，需显式传:autofocus="true"并确保它出现在用户交互之后
