Avertir l'utilisateur avant de quitter page web avec des modifications non enregistrées

Bref, mauvaise réponse:

Vous pouvez le faire en la manipulation de l' beforeunload de l'événement et de retourner une valeur non nulle de la chaîne:

window.addEventListener("beforeunload", function (e) {
    var confirmationMessage = 'It looks like you have been editing something. '
                            + 'If you leave before saving, your changes will be lost.';

    (e || window.event).returnValue = confirmationMessage; //Gecko + IE
    return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.
});

Le problème avec cette approche est que la soumission d'un formulaire est également le tir de l'événement unload. Ce problème est résolu facilement en ajoutant le drapeau que vous êtes à la soumission d'un formulaire:

var formSubmitting = false;
var setFormSubmitting = function() { formSubmitting = true; };

window.onload = function() {
    window.addEventListener("beforeunload", function (e) {
        if (formSubmitting) {
            return undefined;
        }

        var confirmationMessage = 'It looks like you have been editing something. '
                                + 'If you leave before saving, your changes will be lost.';

        (e || window.event).returnValue = confirmationMessage; //Gecko + IE
        return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.
    });
};

Puis en appelant le setter lors de la soumission:

<form method="post" onsubmit="setFormSubmitting()">     
    <input type="submit" />
</form>

Mais à lire...

De Long, bonne réponse:

Vous aussi vous ne voulez pas afficher ce message lorsque l'utilisateur n'a pas changé quoi que ce soit sur vos formulaires. Une solution consiste à utiliser la beforeunload événement en combinaison avec un indicateur "sale, qui ne déclenche l'invite, si c'est vraiment pertinent.

var isDirty = function() { return false; }

window.onload = function() {
    window.addEventListener("beforeunload", function (e) {
        if (formSubmitting || !isDirty()) {
            return undefined;
        }

        var confirmationMessage = 'It looks like you have been editing something. '
                                + 'If you leave before saving, your changes will be lost.';

        (e || window.event).returnValue = confirmationMessage; //Gecko + IE
        return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.
    });
};

Maintenant à mettre en œuvre la isDirty méthode, il existe différentes approches.

Vous pouvez utiliser jQuery et la forme de la sérialisation, mais cette approche présente certains défauts. Vous devez d'abord modifier le code fonctionne sur n'importe quelle forme ($("form").each() fera), mais le plus grand problème est que jQuery serialize() ne fonctionne que sur nommé, non-handicapés, des éléments, de sorte qu'un changement de toute désactivé ou non à l'élément ne sera pas déclencher le drapeau sale. Il existe des solutions de contournement pour que, comme la prise de contrôle en lecture seule au lieu de les activer, de la sérialisation et de désactivation du contrôle à nouveau.

Donc, les événements semblent le chemin à parcourir. Vous pouvez essayer de à l'écoute des combinaisons de touches. Cet événement a quelques questions:

• Ne se déclenche pas sur les cases à cocher, des boutons radio, ou d'autres éléments qui sont en train d'être modifiée par l'entrée de la souris.
• Déclenchera pour la pertinence des combinaisons de touches comme le Ctrl clé.
• Ne se déclenche pas sur les valeurs de l'ensemble grâce à du code JavaScript.
• Ne se déclenche pas sur couper ou coller du texte à travers les menus contextuels.
• De ne pas travailler pour des entrées virtuelles comme datepickers ou une case à cocher/radiobutton beautifiers qui sauver leur valeur dans un caché d'entrée à l'aide de JavaScript.

La modifier événement aussi ne pas se déclencher sur des valeurs définies à partir du code JavaScript, afin aussi de ne pas travailler pour des entrées virtuelles.

La liaison de l' entrée événement à tous entrées (et textareas et selects) sur votre page ne fonctionne pas sur les navigateurs plus anciens et, comme tous les événements de la manipulation de solutions mentionnées ci-dessus, ne supporte pas l'annuler. Lorsqu'un utilisateur modifie une zone de texte, puis dégrafe que, ou de vérifications et décoche une case à cocher, la forme est toujours considéré comme sale.

Et quand vous voulez mettre en œuvre plus de comportement, comme le fait d'ignorer certains éléments, vous aurez encore plus de travail à faire.

Ne pas réinventer la roue:

Donc, avant de penser à la mise en œuvre de ces solutions et à toutes les solutions de contournement, réalisez que vous êtes en train de réinventer la roue et vous avez tendance à courir dans des problèmes que d'autres ont déjà résolu pour vous.

Si votre application utilise déjà jQuery, vous pouvez aussi bien utiliser testé, maintenu code au lieu de roulement de votre propre, et le recours à une tierce partie de la bibliothèque pour tous de ce. jQuery Êtes-Vous Sûr? plugin fonctionne très bien, voir leur page de démonstration. C'est aussi simple que cela:

<script src="jquery.are-you-sure.js"></script>

<script>
  $(function() {
    $('#myForm').areYouSure(
      {
        message: 'It looks like you have been editing something. '
               + 'If you leave before saving, your changes will be lost.'
      }
    );
  });

</script>

Messages personnalisés pas pris en charge partout

Ne remarque que Firefox 4 ne prend pas en charge les messages personnalisés dans cette boîte de dialogue. Depuis le mois dernier, google Chrome 51 est en cours de déploiement dans lequel des messages personnalisés sont également supprimés.

Quelques alternatives existent ailleurs sur ce site, mais je pense qu'un dialogue de ce genre est assez clair:

Voulez-vous quitter ce site?

Modifications que vous avez apportées ne peuvent pas être enregistrées.

Quitter Séjour

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 Formulaire de fonction Serialize, cela permettra de recueillir toutes les entrées d'un formulaire et l'enregistrer dans le tableau. Je suppose que c'expliquer, c'est assez 🙂

Basé sur les réponses précédentes, et bricolé à partir de divers endroits dans le débordement de la pile, voici la solution que j'ai trouvé qui traite le cas lorsque vous souhaitez 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 fonction renvoie undefined pour elle de ne pas afficher un message d'alerte.

La suite de one-liner qui a fonctionné pour moi.

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

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

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;

Vous pouvez cocher la case pour une explication détaillée ici:
http://techinvestigations.redexp.in/comparison-of-form-values-on-load-and-before-close/
comparaison-de-forme-valeurs-sur-charger-et-avant-proche

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
    }

La solution par Eerik Sven Puudist ...

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

... spontanément fait le travail pour moi dans un complexe orientée objet sans toutes les modifications nécessaires.

Le seul changement que j'ai appliqué était de se référer à la forme concrète (un seul formulaire par fichier) appelé "formForm" ('form -> '#formForm'):

<form ... id="formForm" name="formForm" ...>

Particulièrement bien fait, c'est le fait que le bouton "soumettre" est "laissé seul".

En outre, il fonctionne pour moi aussi avec la dernière version de Firefox (à compter de la date du 7 février 2019).

Tout d'abord, la plupart des navigateurs a cette fonction par défaut.
Et pourquoi avez-vous besoin? Pourquoi ne pas garder la forme synchronisés? Je veux dire, l'enregistrer sur n'importe quel changement, sans attendre une 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 les force à se remplir de quelque chose, sans la possibilité d'aller loin de penser que si ils en ont besoin. 🙂