如果用户更改输入而不保存，则启动确认对话框答案

【问题标题】：launch confirm dialog if user changes input without saving如果用户更改输入而不保存，则启动确认对话框
【发布时间】：2019-06-14 19:26:45
【问题描述】：

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

但是，实际发生的情况是当我关闭窗口时，窗口关闭并且对话框不出现。

我引用了以下资源：

Warn user before leaving web page with unsaved changes

JavaScript before leaving the page

这是我目前拥有的：

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/en-US/docs/Web/API/Window/beforeunload_event

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

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

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

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

为什么不启动确认模式？

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

【问题讨论】：

标签： javascript jquery

【解决方案1】：

在你添加的条件中：

event.returnValue = "";
            return "";

所以：

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

【讨论】：

【解决方案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"); 是您的问题所在。

【讨论】：