原生表单验证气泡（::-webkit-validation-bubble）无js api控制，不暴露dom、不可监听事件、preventdefault无效；唯一可控的是阻止其触发（如oninvalid中preventdefault），而非干预其关闭逻辑。
原生表单验证气泡（即 ::-webkit-validation-bubble）没有 JS API 可以直接控制，所谓“禁止失去焦点时关闭”本质上是个伪命题——它压根不支持手动触发、也不响应 JS 事件监听，更无法用 JS 禁用其自动消失逻辑。
为什么你没法用 JS 禁止原生气泡关闭
浏览器原生校验气泡是 WebKit 内核私有实现，仅在 Chrome/Safari 表单校验失败时自动弹出，且：
- 不暴露任何 DOM 节点，
document.querySelector查不到，也无法绑定事件 - 没有对应的事件（如
validationbubbleclose），blur、focusout都监听不到它的生命周期 -
preventDefault()和stopPropagation()对它完全无效 - Chrome 29+ 已禁用
::-webkit-validation-bubble的大部分样式控制，强行覆盖会导致错位或消失
真正能控制的只有触发时机和是否显示
你唯一能干预的是“让它别弹出来”，而不是“弹出来后不让它关”。关键在于提前阻断校验流程：
- 给
<input>绑定oninvalid="event.preventDefault()"，阻止默认气泡触发 - 调用
input.setCustomValidity('')清空校验状态，避免重复触发 - 改用
reportValidity()手动控制显示时机（比如只在表单提交时统一校验） - 若需点击按钮才提示，就不要依赖
blur，改用按钮 click 事件中调用input.reportValidity()
blur 时气泡“看起来”关闭了，其实是它本来就没打算留着
原生气泡的设计就是“校验失败 → 弹出 → 用户交互（点击/失焦/输入）→ 自动销毁”，它没有“保持打开”这个状态。所以你观察到的“失焦就关”，不是它响应了 blur，而是它根本就没有持续存在的机制。
想实现点击按钮后长期展示、点击外部关闭的效果，必须放弃原生气泡，用 position: fixed + getBoundingClientRect() 自建气泡，并手动管理显隐逻辑——鸿蒙 ArkTS 的 Popup 或 Vue 的 v-model:show 是现成解法，但 HTML 原生无此能力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
