vue confirm、messageBox等弹窗关闭后焦点残留问题

问题1、表单弹窗，点击【确认】按钮后，打开$confirm弹窗，回车会自动触发confim弹窗的【确认】，此时如果连续多次回车时，会连续打开多个confirm弹窗；

问题2、输入框也是一样，回车会自动触发【确认】按钮，连续多次回车，也有同样的问题；

问题1、表单弹窗，点击【确认】按钮后，打开$confirm弹窗，点击【取消】按钮，发现光标还在表单弹窗的【确认】按钮上；------ chrome有此问题，safari没有这种问题；

获取当前聚焦元素的核心是使用原生 JS 的 document.activeElement，这是浏览器提供的标准 API，能直接返回页面中当前获得焦点的 DOM 元素；

el-button，chrome点击后处于聚焦的状态，但是safari点击后处于未聚焦的状态；

el-button 在 Chrome 和 Safari 中点击后焦点状态不同，本质是浏览器原生行为差异 + Element UI 适配逻辑共同导致的：

浏览器	点击按钮后的焦点状态	设计逻辑
Chrome/Edge	保持聚焦	优化键盘操作体验，用户可直接按回车再次触发
Safari/Firefox	自动失焦	遵循早期 W3C 标准，认为点击后焦点应离开按钮

问题2、表单弹窗，输入框回车后，打开$confirm弹窗，点击【取消】按钮，发现光标还在表单弹窗的该输入框上；------ chrome、safari都有此问题；

表单输入框聚焦后回车，不会失焦；

confirm弹窗关闭后焦点残留

这个现象是 Element UI 弹窗的焦点管理逻辑导致的：

问题1中 safari 点击【确认】按钮后会立即失焦，因此没有这个问题；

chrome点击【确认】按钮后保持聚焦的状态，输入框也是一样，回车后也保持聚焦的状态；

关闭 $confirm 后，底层组件会调用 focus() 方法将焦点恢复到触发弹窗的原始元素（上一次聚焦的元素），导致你看到光标残留。

Element UI 的 $confirm 等弹窗组件在设计时，为了保证无障碍体验，会在弹窗关闭后自动恢复焦点到触发它的元素：

本质是浏览器原生行为差异 + Element UI 适配逻辑共同导致的：

浏览器	点击按钮后的焦点状态	设计逻辑
Chrome/Edge	保持聚焦	优化键盘操作体验，用户可直接按回车再次触发
Safari/Firefox	自动失焦	遵循早期 W3C 标准，认为点击后焦点应离开按钮

点击表单弹窗的【确认】后，立即失焦；
表单输入框回车后，立即失焦；

我这里点击表单弹窗的【确认】后，会触发自定义的指令，给【确认】按钮一个100ms的禁用状态，避免重复点击的同时，也会自动触发失焦；

在高版本 Element UI 中，el-button 内部监听了 disabled 属性变化。当检测到按钮被禁用时，会主动调用 blur() 方法让按钮失焦，以保证跨浏览器行为一致。

通过自定义弹窗配置，关闭焦点自动恢复行为（Element UI 2.15+ 支持）：

js 复制代码

this.$confirm('确认提交吗？', '提示', {
  confirmButtonText: '确定',
  cancelButtonText: '取消',
  type: 'warning',
  // 关闭焦点自动恢复
  restoreFocus: false
});