输入焦点在电子中无法正常工作

分享于2022年11月15日 css electron html javascript node.js 问答
【问题标题】:Input focus not working in electron properly输入焦点在电子中无法正常工作
【发布时间】:2022-08-17 00:02:33
【问题描述】:

到目前为止,我构建了一个简单的 Electron 应用程序。我的问题是 input.focus() 无法显示警报框。我试图解决这个问题,我想出了一个解决方案:当我最小化和最大化窗口时, input.focus() 运行良好。因此,当我尝试显示警告框时, input.focus() 不起作用,除了最小化和最大化。我尝试在 Chrome 中打开代码,所有功能都运行良好,所以问题出在 Electron 渲染器中。

在最小化和最大化窗口之前

最小化和最大化窗口后

我的电子渲染器

const path = require(\"path\");
const { app, BrowserWindow } = require(\"electron\");

const createWindow = () => {
  const win = new BrowserWindow({
    width: 780,
    height: 600,
    minWidth: 780,
    minHeight: 600,
    icon: path.join(__dirname, \"assets/favicon.ico\"),
    webPreferences: {},
  });
  win.maximize();
  // win.removeMenu();
  win.loadFile(\"index.html\");
};
app.whenReady().then(() => {
  createWindow();
  app.on(\"activate\", () => {
    if (BrowserWindow.getAllWindows().length === 0)
      createWindow();
  });
});
app.on(\"window-all-closed\", () => {
  if (process.platform !== \"darwin\")
    app.quit();
});
  • 确认这在普通 Chromium 浏览器中有效,让我相信 Electron 捆绑的 Chromium ( similar to this question ) 可能有问题。尝试删除你的 node_modules 文件夹和你的 package-lock.json 文件。在此之后,通过在命令提示符下运行 npm install 重新安装 Electron。

【解决方案1】:

如果应用程序窗口没有聚焦,输入焦点将丢失。

当您最小化和最大化应用程序窗口时,输入焦点又回来了。

并且当您发送警报框时,警报会在另一个窗口中打开,因此主应用程序窗口模糊并且其输入焦点模糊。

【讨论】: