无法在窗口之后编辑输入文本字段。

Question

我有这个Electron应用程序(使用NodeJS，Bootstrap，AngularJS)，其中包含一些可以编辑的文本输入字段。 我有一个触发窗口的按钮。 触发后，文本输入字段不再可编辑。

单击应用程序的其他元素不会更改任何内容。

单击另一个应用程序然后返回该应用程序可以解决问题。 使用 Chrome 检查器单击其中一个文本输入字段也可以修复它。

这些是我的输入字段的一些 CSS 属性

element.style {
}
.form-control:focus {
color: #495057;
background-color: #fff;
border-color: #80bdff;
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}
.form-control {
background-color: inherit;
position: relative;
z-index: 10;
}
*:focus {
outline: 0;
}
.form-control {
display: block;
width: 100%;
height: calc(2.25rem + 2px);
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: .25rem;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
*, ::after, ::before {
box-sizing: border-box;
}
input:focus, textarea:focus, select:focus {
outline-offset: -2px;
}
:focus {
outline: -webkit-focus-ring-color auto 5px;
}
input {
padding: 1px 0px;
}
input {
-webkit-appearance: textfield;
background-color: white;
-webkit-rtl-ordering: logical;
cursor: text;
padding: 1px;
border-width: 2px;
border-style: inset;
border-color: initial;
border-image: initial;
}
input, textarea, select, button {
text-rendering: auto;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
margin: 0em;
font: 400 13.3333px Arial;
}
input, textarea, select, button, meter, progress {
-webkit-writing-mode: horizontal-tb !important;
}
html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-ms-overflow-style: scrollbar;
-webkit-tap-highlight-color: transparent;
}
*, ::after, ::before {
box-sizing: border-box;
}
*, ::after, ::before {
box-sizing: border-box;
}

这是警报的代码。

电子弹出窗口elerem.dialog.showMessageBox(elerem.getCurrentWindow(), options)不是导致问题，只是window.alert("Your settings list is up to date");

req.on("end", function () {
res = Buffer.concat(chunks).toString('utf8');
$scope.checkingForUpdate = false;
$scope.$apply();
if (res == fs.readFileSync(CONFIG_FILE_PATH, 'utf8')) {
window.alert("Your settings list is up to date");
} else {
let options = {
buttons: ["Yes", "No"],
message: "An updated settings list is available would you like to get it ? (You'll loose all unsaved settings)"
}
let response = elerem.dialog.showMessageBox(elerem.getCurrentWindow(), options)
if (response == 0) {
$scope.refresh = true;
config.writeToFile(res, CONFIG_FILE_PATH, function (err) {
if (err) {
window.console.log(err);
} else {
window.alert("Your settings list has been updated with success");
}
});
}
}
if ($scope.refresh) {
config.init();
$scope.$apply();
}
});

我希望 message.alert() 不会改变我的文本输入字段的行为。

Answer 1

根据StackOverflow上的这篇文章，电子不支持alert因为它在执行时冻结了线程。 虽然你可以调用它，但如果可能的话，你可能希望看到移动到电子的dialog或页面模式(如MaterialUI或Bootstrap模式)。

Answer 2

我有点晚了，但我在使用 window.alert() 时也遇到了困难。我不知道它也不受支持，所以我设置了一种使用电子对话框发送消息的方法，如上所述。以为我会分享以防其他人有困难。

我完成此操作的方法是使用预加载.js文件。有一篇关于预加载的很棒的文章.js以及 reZach 在这个线程上的 ipcRenderer。

以下是我如何使用它设置我的应用程序警报。

//In preload.js
const {ipcRenderer, contextBridge} = require('electron');
contextBridge.exposeInMainWorld(
"api" : {
messageMain: (channel, message) => {
let validChannels = ['send-alert'];
if (validChannels.includes(channel)) {
ipcRenderer.send(channel, message);
}
}
}
)

//In main.js
//BrowserWindow Setup
let mainWindow;
function createWindow(){
let win = new BrowserWindow({
show: false,
webPreferences: {
nodeIntegration: false,
contextIsolation: true,
enableRemoteModule: false,
preload: __dirname + '/preload.js'
}
})
//load file/URL here 
win.once("ready-to-show", () => {
win.show()
}
}

//ipcMain listener
ipcMain.on("send-alert", (event, incomingMessage) => {
const options = {
type: "none",
buttons: ["Okay"],
title: "Alert Message!"
message: incomingMessage
}
dialog.showMessageBox(mainWindow, options)
})
app.on('ready', () => {
mainWindow = createWindow()
}
//In ipcRenderer
window.api.messageMain("send-alert","Write your alert message here!")

Answer 3

就像上面提到的@Grim1101，使用 electron 的对话框而不是alert()。例如，如果要显示带有标题和内容的错误消息，则可以使用dialog.showErrorBox(title，内容)

{dialog} = require('electron').remote
dialog.showErrorBox('title here','type error message here');