Javascript Can';t在window.alert()之后编辑输入文本字段

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

我有一个电子应用程序(使用NodeJS、Bootstrap、AngularJS)和一些可以编辑的文本输入字段。 我有一个触发窗口的按钮 触发后,文本输入字段不再可编辑

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

单击另一个应用程序,然后再单击该应用程序修复问题。 用Chrome inspector单击其中一个文本输入字段也可以修复它

这些是我的输入字段的一些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;
}
这是警报的代码

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!")