Avvisa l'utente prima di lasciare la pagina Web con modifiche non salvate

Ho alcune pagine con moduli nella mia domanda.

Come posso proteggere il modulo in modo tale che se qualcuno si allontana o chiude la scheda del browser, dovrebbe essere richiesto di confermare che vuole davvero lasciare il modulo con dati non salvati?

Risposta breve e sbagliata:

Puoi farlo gestendo l' beforeunloadevento e restituendo una stringa non nulla :

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

Il problema con questo approccio è che l' invio di un modulo genera anche l'evento di scaricamento . Questo problema viene risolto facilmente aggiungendo il flag che stai inviando un modulo:

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

Quindi chiamare il setter durante l'invio:

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

Ma continua a leggere ...

Risposta lunga e corretta:

Inoltre, non vuoi mostrare questo messaggio quando l'utente non ha modificato nulla nei tuoi moduli . Una soluzione è utilizzare l' beforeunloadevento in combinazione con un flag "sporco", che attiva il prompt solo se è realmente rilevante.

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

Ora per implementare il isDirtymetodo, ci sono vari approcci.

È possibile utilizzare jQuery e la serializzazione dei moduli , ma questo approccio presenta alcuni difetti. Per prima cosa devi modificare il codice per funzionare su qualsiasi modulo ( $("form").each()lo farà), ma il problema maggiore è che jQuery serialize()funzionerà solo su elementi con nome, non disabilitati, quindi la modifica di qualsiasi elemento disabilitato o senza nome non attiverà il flag sporco. Esistono soluzioni alternative per questo , come rendere i controlli di sola lettura anziché abilitare, serializzare e quindi disabilitare nuovamente i controlli.

Quindi gli eventi sembrano la strada da percorrere. Puoi provare ascoltare i tasti premuti . Questo evento presenta alcuni problemi:

• Non si attiva su caselle di controllo, pulsanti di opzione o altri elementi che vengono modificati tramite l'input del mouse.
• Attiverà la pressione di tasti irrilevanti come la Ctrlchiave.
• Non si innescherà sui valori impostati tramite il codice JavaScript.
• Non si innescherà se si taglia o incolla il testo attraverso i menu di scelta rapida.
• Non funzionerà con input virtuali come datepicker o beautifiers checkbox / radiobutton che salvano il loro valore in un input nascosto tramite JavaScript.

L' changeevento anche non attiva su valori impostati dal codice JavaScript , quindi anche non funziona per gli ingressi virtuali.

Associare l' inputevento a tutti gli inputs (e se textareae select) della tua pagina non funzionerà sui browser più vecchi e, come tutte le soluzioni di gestione degli eventi sopra menzionate, non supporta l'annullamento. Quando un utente modifica una casella di testo e quindi annulla tale opzione, oppure seleziona e deseleziona una casella di controllo, il modulo viene comunque considerato sporco.

E quando vuoi implementare più comportamenti, come ignorare determinati elementi, avrai ancora più lavoro da fare.

Non reinventare la ruota:

Quindi, prima di pensare di implementare quelle soluzioni e tutte le soluzioni alternative necessarie, renditi conto che stai reinventando la ruota e sei incline a imbatterti in problemi che altri hanno già risolto per te.

Se l'applicazione utilizza già jQuery, è possibile utilizzare anche codice testato e gestito invece di distribuire il proprio, e utilizzare una libreria di terze parti per tutto questo. Sei sicuro di jQuery? plugin funziona alla grande, vedere la loro pagina demo . È semplice come questo:

<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>

Messaggi personalizzati non supportati ovunque

Nota che Firefox 4 non supportava messaggi personalizzati in questa finestra di dialogo. A partire da aprile 2016, Chrome 51 è stato lanciato in cui vengono rimossi anche i messaggi personalizzati .

Alcune alternative esistono altrove in questo sito, ma penso che una finestra di dialogo come questa sia abbastanza chiara:

Vuoi lasciare questo sito?

Le modifiche apportate potrebbero non essere salvate.

Leave Stay

Controlla l' evento JavaScript onbeforeunload . È un JavaScript non standard introdotto da Microsoft, tuttavia funziona nella maggior parte dei browser e la loro documentazione di scaricamento iniziale contiene ulteriori informazioni ed esempi.

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

Puoi utilizzare la funzione di serializzazione dei moduli di Google JQuery, che raccoglierà tutti gli input dei moduli e li salverà nella matrice. Immagino che questo spieghi sia abbastanza :)

Soluzione universale che non richiede alcuna configurazione che rilevi automaticamente tutte le modifiche di input, inclusi gli elementi 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);
    }
});
// clear modified inputs upon form submission
addEventListener("submit", () => {
    modified_inputs.clear();
    // to prevent the warning from happening, it is advisable
    // that you clear your form controls back to their default
    // state after submission
});
// warn before closing if any inputs are modified
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;
    }
});
})();

Costruito sulla base dell'eccellente idea di Wasim A. di utilizzare la serializzazione. Il problema era che l'avviso veniva mostrato anche quando il modulo veniva inviato. Questo è stato risolto qui.

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

È stato testato in Chrome e IE 11.

Sulla base delle risposte precedenti e messe insieme da vari punti di overflow dello stack, ecco la soluzione che ho trovato che gestisce il caso quando si desidera effettivamente inviare le modifiche:

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;

Vale la pena notare che IE11 sembra richiedere che la closeEditorWarningfunzione ritorni undefinedper non mostrare un avviso.

Il seguente one-liner ha funzionato per me.

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

Basta impostare modifiedsu vero o falso a seconda dello stato dell'applicazione.

Il seguente codice funziona alla grande. È necessario raggiungere le modifiche di input degli elementi del modulo tramite l'attributo 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;

È possibile utilizzare serialize () per creare una stringa di testo con codifica URL serializzando i valori del modulo e verificare se il modulo è cambiato prima dello scaricamento

$(document).ready(function(){
    var form = $('#some-form'),
        original = form.serialize()

    form.submit(function(){
        window.onbeforeunload = null
    })

    window.onbeforeunload = function(){
        if (form.serialize() != original)
            return 'Are you sure you want to leave?'
    }
})

Fare riferimento a questo link https://coderwall.com/p/gny70a/alert-when-leaving-page-with-unsaved-form Scritto da Vladimir Sidorenko

Aggiungendo all'idea di @codecaster potresti aggiungere questo ad ogni pagina con un modulo (nel mio caso lo uso in modo globale, quindi solo sui moduli avrei questo avviso) cambia la sua funzione in

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

Metti anche i moduli invia incluso il login e nei link pulsanti Annulla in modo che quando la persona preme annulla o invia il modulo non attiverà l'avviso anche in ogni pagina senza un modulo ...

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

È possibile verificare una spiegazione dettagliata qui: http://techinvestigations.redexp.in/comparison-of-form-values-on-load-and-before-close/ comparation-of-form-valori-on-load-and -prima-vicino

Il codice principale:

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
    }

Risposta breve:

let pageModified = true

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

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

... ha fatto spontaneamente il lavoro per me in una complessa impostazione orientata agli oggetti senza che fosse necessario apportare modifiche.

L'unica modifica che ho applicato è stata quella di fare riferimento al modulo concreto (solo un modulo per file) chiamato "formForm" ('form' -> '#formForm'):

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

Particolarmente ben fatto è il fatto che il pulsante di invio viene "lasciato solo".

Inoltre, funziona per me anche con l'ultima versione di Firefox (dal 7 febbraio 2019).

Testata la soluzione universale di Eli Grey, ha funzionato solo dopo aver semplificato il codice

  'use strict';
  (() => {
    const modified_inputs = new Set();
    const defaultValue = 'defaultValue';
    // store default values
    addEventListener('beforeinput', evt => {
      const target = evt.target;
      if (!(defaultValue in target.dataset)) {
        target.dataset[defaultValue] = ('' + (target.value || target.textContent)).trim();
      }
    });

    // detect input modifications
    addEventListener('input', evt => {
      const target = evt.target;
      let original = target.dataset[defaultValue];

      let current = ('' + (target.value || target.textContent)).trim();

      if (original !== current) {
        if (!modified_inputs.has(target)) {
          modified_inputs.add(target);
        }
      } else if (modified_inputs.has(target)) {
        modified_inputs.delete(target);
      }
    });

    addEventListener(
      'saved',
      function(e) {
        modified_inputs.clear()
      },
      false
    );

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

  })();

Le modifiche alle sue vengono eliminate target[defaultValue]e utilizzate solotarget.dataset[defaultValue] per memorizzare il valore predefinito reale.

E ho aggiunto un listener di eventi "salvato" in cui l'evento "salvato" verrà attivato da te quando l'operazione di salvataggio ha avuto esito positivo.

Ma questa soluzione 'universale' funziona solo nei browser, non funziona nella visualizzazione web dell'app, ad esempio con i browser.

Per farlo funzionare anche con i browser (parzialmente), di nuovo un altro miglioramento:

  'use strict';
  (() => {
    const modified_inputs = new Set();
    const defaultValue = 'defaultValue';
    // store default values
    addEventListener('beforeinput', evt => {
      const target = evt.target;
      if (!(defaultValue in target.dataset)) {
        target.dataset[defaultValue] = ('' + (target.value || target.textContent)).trim();
      }
    });

    // detect input modifications
    addEventListener('input', evt => {
      const target = evt.target;
      let original = target.dataset[defaultValue];

      let current = ('' + (target.value || target.textContent)).trim();

      if (original !== current) {
        if (!modified_inputs.has(target)) {
          modified_inputs.add(target);
        }
      } else if (modified_inputs.has(target)) {
        modified_inputs.delete(target);
      }

      if(modified_inputs.size){
        const event = new Event('needSave')
        window.dispatchEvent(event);
      }
    });

    addEventListener(
      'saved',
      function(e) {
        modified_inputs.clear()
      },
      false
    );

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

    const ua = navigator.userAgent.toLowerCase();

    if(/MicroMessenger/i.test(ua)) {
      let pushed = false

      addEventListener('needSave', evt => {
        if(!pushed) {
          pushHistory();

          window.addEventListener("popstate", function(e) {
            if(modified_inputs.size) {
              var cfi = confirm('确定要离开当前页面嘛？' + JSON.stringify(e));
              if (cfi) {
                modified_inputs.clear()
                history.go(-1)
              }else{
                e.preventDefault();
                e.stopPropagation();
              }
            }
          }, false);
        }

        pushed = true
      });
    }

    function pushHistory() {
      var state = {
        title: document.title,
        url: "#flag"
      };
      window.history.pushState(state, document.title, "#flag");
    }
  })();

L'ho fatto diversamente, condividendo qui in modo che qualcuno possa ottenere aiuto, testato solo con Chrome.

Volevo avvisare l'utente prima di chiudere la scheda solo in caso di modifiche.

<input type="text" name="field" value="" class="onchange" />

var ischanged = false;

$('.onchange').change(function () {
    ischanged = true;
});

window.onbeforeunload = function (e) {
    if (ischanged) {
        return "Make sure to save all changes.";
    }        
};

Funziona bene, ma ho avuto un altro problema, quando invio il modulo ricevo l'avvertimento indesiderato, ho visto un sacco di soluzioni alternative su questo, questo perché onbeforeunload si attiva prima di invio, ecco perché non possiamo gestirlo in eventi di invio come onbeforeunload = null, ma l'evento onclick del pulsante di invio si attiva prima di entrambi questi eventi, quindi ho aggiornato il codice

var isChanged = false;
var isSubmit = false;

window.onbeforeunload = function (e) {
    if (isChanged && (!isSubmit)) {
        return "Make sure to save all changes.";
    }        
};

$('#submitbutton').click(function () {
    isSubmit = true;
});

$('.onchange').change(function () {
    isChanged = true;
});

Innanzitutto, la maggior parte dei browser ha questa funzione di default. E perché ne hai bisogno? Perché non mantenere il modulo sincronizzato? Voglio dire, salvalo su qualsiasi modifica senza attendere l'invio da parte dell'utente. Come fanno i contatti di Google. Naturalmente se solo tutti i campi del modulo sono obbligatori. Agli utenti non piace quando costringono a riempire qualcosa senza l'opportunità di andare via per pensare se ne hanno bisogno. :)