电子中的“警报”后无法编辑输入元素

Question

TLDR

我在学电子。我有一个 html 元素 <input type="text">，我可以编辑其中的文本。在我执行 alert 之后，当我单击 input 元素时，它没有显示光标，并且按键盘上的键不会更改元素中的文本。如果我在浏览器中做同样的事情就不会发生这种情况，我不确定我是否做错了什么。

最小的、可重现的例子

设置

在终端的空文件夹中写入：

npm init # And leave the defaults
npm install --save-dev electron

然后创建index.js:

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

app.on('ready', () => {
    let b = new BrowserWindow();
    b.loadFile("index.html");
});

和index.html：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
</head>

<body>
    <input type="text">
    <button onclick="alert('foo');">Hi</button>
</body>

</html>

重现步骤

在终端上写入 npx electron . 以启动应用程序。
编辑 input
按 Hi 按钮。
关闭对话框。
单击 input 元素。

该元素没有显示光标，也没有改变以表明我正在编辑它。按键盘上的键不会更改 input.

中的文本

多次点击选择文本，它让我删除它。但是我无法写新文本。

预期行为

在浏览器中打开 index.html，然后重复这些步骤。在浏览器中，元素显示一个光标，我可以编辑其中的文本。

我不确定我是否做错了什么，或者这是否真的是预期的行为。

这里是 package.json 如果这里的一些信息有帮助：

{
    "name": "test",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "electron": "^17.1.2"
    }
}

编辑： 添加了我在重现步骤中遗漏的内容。在发布后测试它时我注意到的一些奇怪的事情是，如果我最小化 window，然后再次打开它，我就能够编辑输入。如果我打开和关闭开发者工具，也会发生这种情况。

Answer 1

_{经过一番挖掘，我想我找到了另一个答案。}

在我的系统上获得您的代码并按照您问题中的所有步骤进行操作后，它在我这边运行正常。

也许您应该检查您的 Electron（和 Chromium）版本，并在需要时更新它们。

对于你，删除 node_modules 文件夹（和 package-lock.json，如果有帮助的话），然后再次运行下面的命令。

$ npm install

_{注：忽略$。另外，请确保运行项目目录中的命令！}

这将确保您运行所有内容都是最新版本！

经过我这边的一些调查，我得出结论，这可能是 Chrome 的问题，而不是 Electron，因为 Electron 只是运行s Chromium inside window ，不管它做什么。

Answer 2

所以，这是一个非常奇怪的问题。

在我的系统上重现代码后，一切似乎都在正常工作。 IE：警告框关闭，仍然可以将光标聚焦在文本框内，甚至可以毫无问题地编辑文本框。

由于 Electron 不会以任何方式改变 Chrome 的正常行为，并且它在我（和其他人）的系统上正常工作，所以只能得出一个结论。 Chrome.

有问题

要消除 Chrome 文件损坏的任何可能性，请尝试删除您的 node_modules 文件夹和 package-lock.json 文件。

在此之后，re-install Electron by 运行 npm install 在命令提示符下。

电子中的“警报”后无法编辑输入元素

Unable to edit input element after an `alert` in electron

html

javascript

electron

TLDR

最小的、可重现的例子

设置

重现步骤

预期行为