Avertir l'utilisateur avant de quitter la page Web avec des modifications non sauvegardées

JavaScript onbeforeunload événement . Il est JavaScript non standard introduit par Microsoft, mais il fonctionne dans la plupart des navigateurs et leur documentation onbeforeunload a plus d'informations et d'exemples.

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

vous pouvez Google jQuery form Serialize fonction, ce qui permettra de collecter toutes les entrées de formulaire et de l'enregistrer dans array. Je suppose que c'expliquer, c'est assez :)

basé sur les réponses précédentes, et bricolé ensemble à partir de divers endroits dans le débordement de la pile, voici la solution que j'ai inventé qui gère le cas quand vous voulez réellement soumettre vos modifications:

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;

Il est intéressant de noter que IE11 semble exiger que le closeEditorWarning la fonction renvoie undefined pour ne pas afficher un message d'alerte.

la doublure suivante a fonctionné pour moi.

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

Juste mis modified à vrai ou false en fonction de l'état de votre demande.

le code suivant fonctionne très bien. Vous devez atteindre les modifications d'entrée des éléments de votre formulaire via l'attribut 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;

solution universelle ne nécessitant aucune configuration qui détecte automatiquement toutes les modifications d'entrée, y compris les éléments susceptibles d'être contenus:

"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;
    }
});
})();

courte réponse:

let pageModified = true

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

construit sur le dessus de Wasim A. excellente idée d'utiliser la sérialisation. Le problème était que l'avertissement était également affiché lorsque le formulaire était soumis. Ceci a été réparé ici.

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

il a été testé dans Chrome et IE 11.

ajoute à l'idée de @codecaster vous pouvez ajouter ceci à chaque page avec un formulaire (dans mon cas je l'utilise de manière globale donc seulement sur les formulaires auraient cet avertissement) changer sa fonction en

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

également mis sur les formulaires soumettre y compris l'ouverture de session et dans les liens de boutons d'annulation de sorte que lorsque la personne appuie sur Annuler ou soumettre le formulaire ne déclenchera pas l'avertissement aussi dans chaque page avec un formulaire...

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

, Vous pouvez vérifier pour une explication détaillée ici: http://techinvestigations.redexp.in/comparison-of-form-values-on-load-and-before-close / comparaison des valeurs de forme-en charge et avant fermeture 151940920"

le code principal:

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
    }

tout d'abord, la plupart des navigateurs ont cette fonction par défaut. Et pourquoi avez-vous besoin? Pourquoi ne pas synchroniser le formulaire? Je veux dire, le sauvegarder sur n'importe quel changement sans attendre la soumission de l'utilisateur. Comme Google Contacts n'. Bien sûr, si seulement tous les champs du formulaire sont obligatoires. Les utilisateurs n'aiment pas quand ils forcent à remplir quelque chose sans la possibilité de partir pour penser s'ils en ont besoin. :)