1. 问题呈现

如下图所示，点击按钮后会弹出弹窗，弹窗中显示的内容为 chrome、node、electron 的版本

---

---

但是关闭弹窗后，即使手动点击输入框，输入框也无法聚焦（最小化窗口后再次打开窗口输入框才能聚焦）

---

---

2. 问题产生的原因

关闭 alert 弹窗后，页面上的输入框无法获取焦点（在 macOS 或某些 Linux 桌面环境中更为明显），根本原因在于 alert() 是一个同步的、阻塞的 JavaScript 函数

1. alert() 的阻塞性：当你的代码执行到 alert(message) 时，它会立即暂停当前渲染进程（你的网页）的所有 JavaScript 执行，并弹出一个原生的模态对话框。这个对话框由 Electron 的主进程或者操作系统级别来管理，而不是你的渲染进程本身
2. 焦点丢失：当这个原生的 alert 对话框出现时，它会从你的 Electron 窗口（渲染进程）“抢走”操作系统的焦点。用户必须先与 alert 对话框交互（点击“确定”），才能回到原来的窗口
3. 焦点未能正确归还：问题就出在这里。当用户点击“确定”关闭 alert 对话框后，虽然窗口看起来恢复了，但操作系统和 Electron 内部可能没有将焦点正确地归还给窗口内的 <input> 元素。窗口本身可能获得了焦点，但焦点没有进一步传递到窗口内的可交互元素上

3. 解决方法

3.1 解决方法一：在主进程中使用Electron的dialog模块（原生外观，系统级体验）

3.1.1 main.js

ipcMain.handle('showMessageBox', (event, message) => {
  dialog.showMessageBox({
    title: '版本信息',
    message: message,
    buttons: ['确定', '取消'],
    defaultId: 0, // 确定按钮索引
    cancelId: 1, // 取消按钮索引
    type: 'info',
    checkboxChecked: true, // 默认为 false
    checkboxLabel: '记住我的选择'
  }).then(result => {
    // result =  { response: 0, checkboxChecked: false }
    // result =  { response: 1, checkboxChecked: false }
    console.log('result = ', result)
    if (result.response === 0) {
      console.log('点击了确定按钮')
    } else {
      // 包括了"点击取消"和"点击X"两种情况
      console.log('点击了取消按钮')
    }
  })
});

3.1.2 preload.js

showMessageBox: (message) => {
  return ipcRenderer.invoke('showMessageBox', message)
}

3.1.3 render.js

btn.addEventListener('click', () => {
  myApi.showMessageBox(
    'chrome version = ' + myApi.versions.chrome +
    '; node version = ' + myApi.versions.node +
    '; electron version = ' + myApi.versions.electron);
});

3.1.4 实现效果

3.2 解决方法二：自定义弹窗或使用第三方组件库的弹窗（对UI要求较高时使用）

可以让 AI 帮你写一个自定义弹窗，或者直接使用第三方组件库中的弹窗

4. 在Electron渲染进程中不要使用alert()、confirm()、prompt()函数

⚠️ 渲染进程开发警告：请避免使用 alert()、confirm() 和 prompt() 函数

---

这些浏览器原生方法会带来一系列问题：

• 阻塞渲染：冻结整个应用界面，造成糟糕的用户体验
• 焦点混乱：弹窗关闭后，页面焦点时常丢失，导致输入框等元素无法响应
• 体验不一致：在不同操作系统上，其外观和行为差异巨大

---

更优选择：

• 使用主进程的 dialog 模块，实现原生、非阻塞的系统对话框
• 在页面内构建自定义的 Toast 或 Modal 组件
• 集成成熟的 UI 库（如 Ant Design, Element Plus 等）