原生校验气泡不会在获得焦点时自动消失，需通过 focus 事件调用 setCustomValidity('') 清除错误状态，并避免在 focus 后立即触发校验；也可禁用原生校验改用自定义提示实现完全可控。
原生校验气泡（即浏览器默认的红色提示框）不会在输入框获得焦点时自动消失；它只在表单提交失败、或调用 reportValidity() 时触发，且默认在用户与输入框交互（如输入、失焦）后才可能隐藏。要让它“获得焦点时就消失”，本质是主动清除校验状态并阻止气泡再次出现。
清空自定义校验错误
如果你之前用 setCustomValidity() 设置过错误信息，那么焦点获取时需手动清空：
- 监听
focus或click事件 - 立即调用
inputElement.setCustomValidity('') - 可选：再调用
inputElement.reportValidity()强制重置视觉状态（但通常不必要）
避免气泡重复触发
气泡常在失焦（blur）时因校验失败而弹出。若你已在 blur 中设置了错误，那焦点一获取，就得同步清理：
- 确保
focus事件中清除错误，且不晚于用户下一次交互 - 不要在
focus后立刻触发校验逻辑（例如不要紧跟着调用checkValidity()），否则可能瞬间又触发气泡 - 若使用了
required或pattern等原生属性，清空setCustomValidity('')仍有效——它会覆盖原生校验的气泡优先级
隐藏气泡的 CSS 方式（辅助手段）
浏览器不提供直接禁用气泡的 API，但可通过样式弱化其影响：
- 给
:invalid:not(:placeholder-shown)添加outline: none和box-shadow: none，减少视觉干扰 - 注意：这不能阻止气泡弹出，仅让边框/阴影不加重错误感
- 气泡本身（tooltip）无法用 CSS 隐藏，这是浏览器安全策略限制
更干净的做法：接管校验全流程
如果对气泡行为要求严格，建议放弃依赖原生气泡，改用 JS 自主控制提示：
- 禁用原生校验：
novalidate加在 form 上，或每个 input 设formnovalidate - 用
input或blur事件做实时验证 - 错误时操作 DOM 显示自定义提示，正确时移除提示并清除
setCustomValidity('') - 这样气泡完全不会出现，焦点获取时自然“无泡可消”
