Ostrzegaj użytkownika przed opuszczeniem strony internetowej z niezapisanymi zmianami

Sprawdź Zdarzenie JavaScript onbeforeunload. Jest to Niestandardowy JavaScript wprowadzony przez Microsoft, jednak działa w większości przeglądarek i ich dokumentacja onbeforeunload zawiera więcej informacji i przykładów.

Via 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.
});

Możesz Google jQuery formularz Serialize funkcji, to będzie zbierać wszystkie wejścia formularza i zapisać go w tablicy. To chyba wystarczy:)

Bazując na poprzednich odpowiedziach i ułożonych razem z różnych miejsc w stack overflow, oto rozwiązanie, które wymyśliłem, które obsługuje sprawę, gdy faktycznie chcesz przesłać swoje zmiany:

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;

Warto zauważyć, że IE11 wydaje się wymagać, aby funkcja closeEditorWarning zwracała undefined, aby nie pokazywała alarmu.

Następujący one-liner działa dla mnie.

window.onbeforeunload = s => modified ? "" : null;

Ustaw modifiedna truelub false w zależności od stanu aplikacji.

Następujący kod działa świetnie. Musisz wprowadzić zmiany w elementach formularza poprzez atrybut id:

var somethingChanged=false;
            $('#managerForm input').change(function() { 
                somethingChanged = true; 
           }); 
            $(window).bind('beforeunload', function(e){
                if(somethingChanged)
                    return "You made some changes and it's not saved?";
                else 
                    e=null; // i.e; if form state change show warning box, else don't show it.
            });
        });

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;

Uniwersalne rozwiązanie nie wymagające konfiguracji, które automatycznie wykrywa wszystkie modyfikacje wejścia, w tym elementy contenteditable:

"use strict";
(() => {
const modified_inputs = new Set;
const defaultValue = "defaultValue";
// store default values
addEventListener("beforeinput", (evt) => {
    const target = evt.target;
    if (!(defaultValue in target || defaultValue in target.dataset)) {
        target.dataset[defaultValue] = ("" + (target.value || target.textContent)).trim();
    }
});
// detect input modifications
addEventListener("input", (evt) => {
    const target = evt.target;
    let original;
    if (defaultValue in target) {
        original = target[defaultValue];
    } else {
        original = target.dataset[defaultValue];
    }
    if (original !== ("" + (target.value || target.textContent)).trim()) {
        if (!modified_inputs.has(target)) {
            modified_inputs.add(target);
        }
    } else if (modified_inputs.has(target)) {
        modified_inputs.delete(target);
    }
});
addEventListener("beforeunload", (evt) => {
    if (modified_inputs.size) {
        const unsaved_changes_warning = "Changes you made may not be saved.";
        evt.returnValue = unsaved_changes_warning;
        return unsaved_changes_warning;
    }
});
})();

Krótka odpowiedź:

let pageModified = true

window.addEventListener("beforeunload", 
  () => pageModified ? 'Close page without saving data?' : null
)

Zbudowany na bazie Wasima A. doskonały pomysł użycia serializacji. Problem polegał na tym, że Ostrzeżenie było również wyświetlane podczas składania formularza. To zostało naprawione tutaj.

var isSubmitting = false

$(document).ready(function () {
    $('form').submit(function(){
        isSubmitting = true
    })

    $('form').data('initial-state', $('form').serialize());

    $(window).on('beforeunload', function() {
        if (!isSubmitting && $('form').serialize() != $('form').data('initial-state')){
            return 'You have unsaved changes which will not be saved.'
        }
    });
})

Został przetestowany w Chrome i IE 11.

Dodanie do pomysłu @ codecaster możesz to dodać do każdej strony z formularzem (w moim przypadku używam go w sposób globalny, więc tylko na formularzach będzie to Ostrzeżenie) zmień jego funkcję na

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

Również umieścić na formularzach submit łącznie z loginem i w przyciskach cancel linki więc po naciśnięciu przycisku cancel lub submit formularz nie uruchomi Ostrzeżenia również na każdej stronie w formularzu...

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

Możesz sprawdzić szczegółowe wyjaśnienie tutaj: http://techinvestigations.redexp.in/comparison-of-form-values-on-load-and-before-close / porównanie-form-values-on-load-and-before-close

Główny kod:

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
    }

Przede wszystkim większość przeglądarek domyślnie posiada tę funkcję. I po co ci to w ogóle? Dlaczego nie synchronizować formularza? To znaczy, zapisz go na każdej zmianie bez czekania na zgłoszenie od użytkownika. Tak jak robią to Kontakty Google. Oczywiście jeśli tylko wszystkie pola w formularzu są obowiązkowe. Użytkownicy nie lubią, gdy zmuszają do wypełnienia czegoś bez możliwości odejścia, aby pomyśleć, czy tego potrzebują. :)