在離開網頁之前進行未保存的更改之前警告用戶

本文翻譯自：Warn user before leaving web page with unsaved changes

I have some pages with forms in my application. 我的應用程序中有一些帶有表單的頁面。

How can I secure the form in such a way that if someone navigates away or closes the browser tab, they should be prompted to to confirm they really want to leave the form with unsaved data? 我如何以某種方式保護表單，如果有人導航或關閉瀏覽器選項卡，應該提示他們確認他們確實要保留未保存的數據？

---

#1樓

參考：https://stackoom.com/question/UhYX/在離開網頁之前進行未保存的更改之前警告用戶

---

#2樓

Based on the previous answers, and cobbled together from various places in stack overflow, here is the solution I came up with which handles the case when you actually want to submit your changes: 根據先前的答案，並從堆棧溢出的各個地方進行湊整，這是我想出的解決方案，用於解決您實際要提交更改的情況：

window.thisPage = window.thisPage || {};
window.thisPage.isDirty = false;

window.thisPage.closeEditorWarning = function (event) {
    if (window.thisPage.isDirty)
        return 'It looks like you have been editing something' +
               ' - if you leave before saving, then your changes will be lost.'
    else
        return undefined;
};

$("form").on('keyup', 'textarea', // You can use input[type=text] here as well.
             function () { 
                 window.thisPage.isDirty = true; 
             });

$("form").submit(function () {
    QC.thisPage.isDirty = false;
});
window.onbeforeunload = window.thisPage.closeEditorWarning;

It's worth noting that IE11 seems to require that the closeEditorWarning function returns undefined for it not to show an alert. 值得注意的是，IE11似乎要求closeEditorWarning函數返回undefined以便不顯示警報。

---

#3樓

via jquery 通過jQuery

$('#form').data('serialize',$('#form').serialize()); // On load save form current state

$(window).bind('beforeunload', function(e){
    if($('#form').serialize()!=$('#form').data('serialize'))return true;
    else e=null; // i.e; if form state change show warning box, else don't show it.
});

You can Google JQuery Form Serialize function, this will collect all form inputs and save it in array. 您可以使用Google JQuery表單序列化功能，該功能將收集所有表單輸入並將其保存在數組中。 I guess this explain is enough :) 我想這解釋就足夠了:)

---

#4樓

var unsaved = false;
$(":input").change(function () {         
    unsaved = true;
});

function unloadPage() {         
    if (unsaved) {             
        alert("You have unsaved changes on this page. Do you want to leave this page and discard your changes or stay on this page?");
    }
} 
window.onbeforeunload = unloadPage;

---

#5樓

Adding to te idea of @codecaster you could add this to every page with a form (in my case i use it in global way so only on forms would have this warn) change his function to 添加@codecaster的想法，您可以將此表單添加到每個頁面中（在我的情況下，我以全局方式使用它，因此僅在表單上會有此警告），將其功能更改爲

if ( formSubmitting || document.getElementsByTagName('form').length == 0) 

Also put on forms submit including login and in cancel buttons links so when person press cancel or submit the form won't trigger the warn also in every page witouth a form... 還放置表單提交，包括登錄和“取消”按鈕鏈接，因此當用戶按下“取消”或提交表單時，表單的每一頁也不會觸發警告...

<a class="btn btn-danger btn-md" href="back/url" onclick="setFormSubmitting()">Cancel</a>

---

#6樓

You could check for a detailed explanation here: http://techinvestigations.redexp.in/comparison-of-form-values-on-load-and-before-close/ comparison-of-form-values-on-load-and-before-close 您可以在此處檢查詳細說明： http : //techinvestigations.redexp.in/comparison-of-form-values-on-load-and-before-close/comparative-of-form-values-on-load-and -收盤前

The main code: 主要代碼：

function formCompare(defaultValues, valuesOnClose) {

    // Create arrays of property names
    var aPropsFormLoad = Object.keys(defaultValues);
    var aPropsFormClose = Object.keys(valuesOnClose);

    // If number of properties is different,
    // objects are not equivalent
    if (aPropsFormLoad.length != aPropsFormClose.length) {
        return false;
    }

    for (var i = 0; i < aPropsFormLoad.length; i++) {
        var propName = aPropsFormLoad[i];

        // If values of same property are not equal,
        // objects are not equivalent
        if (defaultValues[aPropsFormLoad]+"" !== valuesOnClose[aPropsFormLoad]+"") {
            return false;
        }
    }

    // If we made it this far, objects
    // are considered equivalent
    return true;

}

//add polyfill for older browsers, as explained on the link above

//use the block below on load
    for(i=0; i < document.forms[0].elements.length; i++){
    console.log("The field name is: " + document.forms[0].elements[i].name +
        " and it’s value is: " + document.forms[0].elements[i].value );
    aPropsFormLoad[i] = document.forms[0].elements[i].value;
    }

//create a similar array on window unload event.

//and call the utility function
    if (!formCompare(aPropsOnLoad, aPropsOnClose))
    {
    //perform action: 
    //ask user for confirmation or
    //display message about changes made
    }