如果用户更改输入但未保存，则启动确认对话框

Question

如果用户在不保存的情况下更改了表单中的输入字段，则需要在JS中实施警告。 预期的行为是我对输入进行了更改，并且如果我尝试关闭窗口，则会出现确认对话框。

但是，实际上发生的是当我关闭窗口，窗口关闭并且没有出现对话框时。

我引用了以下资源：

在离开网页之前进行未保存的更改之前警告用户

离开页面前的JavaScript

这是我目前拥有的：

var formInputChanged = false;
$(function() {
    // activate modal is field is edited
    $(".account-settings-form input").on("input", function() {
        window.formInputChanged = true;
    });
    $("input[value='Cancel']").click(function() {
        window.formInputChanged = false;
    });

    window.addEventListener('beforeunload', (event) => {
        if (window.formInputChanged) {
            confirm("You have unsaved changes");
        }
    });
 });

据我所知，我已经全局设置了该变量，应该可以完全访问该变量，并将其分配给函数中的窗口。

我可以在console.log（）中看到formInputChanged是正确的值。

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/beforeunload_event

此事件使网页能够触发一个确认对话框，询问用户是否真的要离开该页面。 如果用户确认，浏览器将导航到新页面，否则将取消导航。

“离开页面”是什么意思？ 返回键？ X出？ 是事件侦听器问题吗？

根据规范，要显示确认对话框，事件处理程序应在事件上调用preventDefault（）。

我已经准备好了，所以这似乎不是问题所在...

为什么不确认模式启动？

这是完整的JS Fiddle演示： https : //jsfiddle.net/g6wjrcae/

Answer 1

在条件中添加：

event.returnValue = "";
            return "";

所以：

window.addEventListener('beforeunload', (event) => {
        event.preventDefault();
        if (window.formInputChanged) {
            event.returnValue = "";
            return "";
        }
    });

Answer 2

在处理程序中尝试"beforeunload"

window.addEventListener("beforeunload", function (e) {
    if(formInputChanged) {
        var confirmationMessage = "You have unsaved changes";

        (e || window.event).returnValue = confirmationMessage; //Gecko + IE
        return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.
    }
}); 

我相信confirm("You have unsaved changes"); 是您的问题所在。