如果用戶更改輸入但未保存，則啟動確認對話框

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"); 是您的問題所在。