Javascript Can';t在window.alert()之后编辑输入文本字段
我有一个电子应用程序(使用NodeJS、Bootstrap、AngularJS)和一些可以编辑的文本输入字段。 我有一个触发窗口的按钮 触发后,文本输入字段不再可编辑 单击应用程序的其他元素不会改变任何内容 单击另一个应用程序,然后再单击该应用程序修复问题。 用Chrome inspector单击其中一个文本输入字段也可以修复它 这些是我的输入字段的一些CSS属性Javascript Can';t在window.alert()之后编辑输入文本字段,javascript,html,css,electron,Javascript,Html,Css,Electron,我有一个电子应用程序(使用NodeJS、Bootstrap、AngularJS)和一些可以编辑的文本输入字段。 我有一个触发窗口的按钮 触发后,文本输入字段不再可编辑 单击应用程序的其他元素不会改变任何内容 单击另一个应用程序,然后再单击该应用程序修复问题。 用Chrome inspector单击其中一个文本输入字段也可以修复它 这些是我的输入字段的一些CSS属性 element.style { } .form-control:focus { color: #495057; ba
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;
}
这是警报的代码
electron弹出的elerem.dialog.showMessageBox(elerem.getCurrentWindow(),options)
没有引起问题,只有window.alert(“您的设置列表是最新的”)代码>
我希望message.alert()不会更改文本输入字段的行为。根据的要求,electron不支持alert
,因为它在执行时会冻结线程。虽然您可以调用它,但如果可能的话,您可能希望看到有关移动到electron的对话框或页面内模式(如MaterialUI或Bootstrap模式)的信息。像上面提到的@grim101一样,使用electron的对话框而不是alert()
。例如,如果要显示带有标题和内容的错误消息,可以使用
我有点晚了,但我在使用window.alert()时也遇到了困难。我不知道它也不受支持,所以我设置了一种方法,用electron的对话框发送消息,如上所述。我想我会和你分享,以防其他人有困难
我完成这项工作的方法是使用preload.js文件。有一篇关于preload.js和reZach开发的IPC渲染器的文章
下面是我如何使用它设置我的应用程序警报
//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!")
我看到您将此标记为JavaScript问题,但没有列出任何代码-警报是否也会修改页面,例如将警报设置为模式框?我将添加confirm
以创建相同的问题。
{dialog} = require('electron').remote
dialog.showErrorBox('title here','type error message here');
//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!")