Question

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

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

我引用了以下资源：

Warn user before leaving web page with unsaved changes

这是我目前拥有的：

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小提琴演示：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");是您的问题所在。

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

2 个答案: