表单校验失败后聚焦第一个错误字段需在 DOM 渲染完成后用原生 focus() 调用，避开 submit 事件同步调用和 jQuery 方法陷阱；必须确保元素可见、可聚焦，并在 iOS Safari 中严格置于用户手势同步链内，同时配合 scrollIntoView 防止失焦于视口外。
表单校验失败后聚焦第一个错误字段
直接用 Bootstrap 自带的 form-control.is-invalid 类配合手动 focus() 即可，但必须避开两个坑：一是不能在 submit 事件里同步调用（此时 DOM 可能还没渲染出错误提示），二是不能依赖 jQuery 对象的 .focus() 方法。
- 推荐监听
invalid.bs.form或自定义校验后的回调，等浏览器完成样式重绘再找第一个.is-invalid input, .is-invalid textarea, .is-invalid select - 必须用原生 DOM 元素调用：
document.querySelector('.is-invalid input')?.focus()，而不是$('input.is-invalid').focus() - 若输入框被
display: none或visibility: hidden包裹（比如折叠面板里），需先scrollIntoView({ block: 'nearest' })再 focus - Vue/React 场景下，得等框架 patch 完成，比如 Vue 用
this.$nextTick(() => el.focus())，React 用useEffect(() => { el?.focus() }, [hasError])
为什么 submit 事件里 focus() 常常不生效
常见现象是：表单提交失败、错误类已加上、控制台没报错，但光标就是不动。根本原因是浏览器在 submit 事件处理中尚未完成 DOM 更新（尤其是动态插入的 .invalid-feedback 或 class 切换），此时 querySelector 找不到目标元素，或元素虽存在但未进入可聚焦状态。
-
submit是同步事件，但 class 切换、CSS 渲染、DOM 重排都是异步的，直接focus()属于“过早调用” - 解决方案是加一层微任务延迟：
setTimeout(() => el?.focus(), 0)或更稳妥的queueMicrotask(() => el?.focus()) - 如果用了 Bootstrap 的
novalidate+checkValidity()手动校验，务必在checkValidity()返回false后再查.is-invalid元素
iOS Safari 下键盘不弹的硬性限制
iOS 不允许非用户手势触发的焦点获得软键盘，哪怕你已经确保元素可见、可聚焦、DOM 已挂载，只要 focus() 不在 click/tap 的同步调用链里，键盘就一定不弹。
- 表单校验失败后，用户刚点了“提交”按钮，这个 click 就是唯一合法入口；所有后续 focus 必须紧接其后，不能进任何事件循环（包括
shown.bs.modal、setTimeout、Promise 回调） - 正确写法示例：
$('#submitBtn').click(function(e) { e.preventDefault(); if (!$('#myForm')[0].checkValidity()) { const firstInvalid = document.querySelector('.is-invalid input, .is-invalid textarea'); if (firstInvalid) { firstInvalid.focus(); // 同步执行，无任何包裹 firstInvalid.scrollIntoView({ block: 'nearest' }); } return; } // 提交逻辑... }); - 若校验逻辑异步（如调 API 检查用户名是否可用），则无法触发键盘——这是 iOS 的设计限制，只能改交互，比如把“提交”拆成“校验 → 确认提交”两步
动态表单（AJAX 加载、Tab 切换）怎么保证聚焦准确
当表单内容不是初始 HTML，而是通过 AJAX、Vue v-if、Bootstrap Tab 切换加载时，.is-invalid 元素可能在聚焦前还没挂载到 DOM，或挂载后焦点被其他逻辑抢占。
- 不要依赖全局
document.querySelector，优先从当前表单容器查：formEl.querySelector('.is-invalid input') - Tab 切换场景下，监听
shown.bs.tab事件，在回调里做校验和聚焦，而不是等页面加载完就绑定 - AJAX 加载表单后，应在
load回调或success钩子里执行聚焦，而非靠shown.bs.modal—— 后者触发时内容可能还没插入 - 避免多次聚焦冲突：加个标记位，比如
if (!el.dataset.focused) { el.focus(); el.dataset.focused = '1'; }，防止重复调用干扰用户操作
focus() 会让光标“消失”，用户不知道输在哪。每次聚焦前补一句 scrollIntoView({ block: 'nearest' })，比加动画或提示文字更实际。 
