Warnen Sie den Benutzer, bevor Sie die Webseite mit nicht gespeicherten Änderungen verlassen

Ich habe einige Seiten mit Formularen in meiner Bewerbung.

Wie kann ich das Formular so sichern, dass jemand, der weg navigiert oder den Browser-Tab schließt, aufgefordert werden sollte, zu bestätigen, dass er das Formular wirklich mit nicht gespeicherten Daten verlassen möchte?

Kurze, falsche Antwort:

Sie können dies tun, indem Sie das beforeunloadEreignis behandeln und eine Nicht-Null-Zeichenfolge zurückgeben :

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

Das Problem bei diesem Ansatz besteht darin, dass beim Senden eines Formulars auch das Entladeereignis ausgelöst wird . Dies lässt sich leicht beheben, indem Sie ein Flag hinzufügen, mit dem Sie ein Formular senden:

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

Rufen Sie dann den Setter an, wenn Sie senden:

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

Aber lesen Sie weiter ...

Lange, richtige Antwort:

Sie möchten diese Nachricht auch nicht anzeigen, wenn der Benutzer in Ihren Formularen nichts geändert hat . Eine Lösung besteht darin, das beforeunloadEreignis in Kombination mit einem "schmutzigen" Flag zu verwenden, das die Eingabeaufforderung nur dann auslöst, wenn es wirklich relevant ist.

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

Um die isDirtyMethode zu implementieren , gibt es verschiedene Ansätze.

Sie können jQuery und Formularserialisierung verwenden , dieser Ansatz weist jedoch einige Mängel auf. Zuerst müssen Sie den Code ändern, damit er in einem beliebigen Formular funktioniert ( $("form").each()funktioniert), aber das größte Problem ist, dass jQuery's serialize()nur für benannte, nicht deaktivierte Elemente funktioniert. Wenn Sie also ein deaktiviertes oder nicht benanntes Element ändern, wird das Dirty-Flag nicht ausgelöst. Hierfür gibt es Problemumgehungen, z. B. das schreibgeschützte Erstellen von Steuerelementen anstelle des Aktivierens, Serialisierens und anschließenden erneuten Deaktivierens der Steuerelemente.

Ereignisse scheinen also der richtige Weg zu sein. Sie können versuchen , auf Tastendrücke zu warten . Diese Veranstaltung hat einige Probleme:

• Wird nicht bei Kontrollkästchen, Optionsfeldern oder anderen Elementen ausgelöst, die durch Mauseingabe geändert werden.
• Wird für irrelevante Tastendrücke wie die CtrlTaste ausgelöst .
• Wird bei Werten, die über JavaScript-Code festgelegt wurden, nicht ausgelöst.
• Wird beim Ausschneiden oder Einfügen von Text über Kontextmenüs nicht ausgelöst.
• Funktioniert nicht für virtuelle Eingaben wie Datepicker oder Checkbox- / Radiobutton-Verschönerer, die ihren Wert in einer versteckten Eingabe über JavaScript speichern.

Das changeEreignis wird auch nicht bei Werten ausgelöst, die aus JavaScript-Code festgelegt wurden , und funktioniert daher auch nicht für virtuelle Eingaben.

Das Binden des inputEreignisses an alle inputs (und textareas und selects) auf Ihrer Seite funktioniert in älteren Browsern nicht und unterstützt wie alle oben genannten Ereignisbehandlungslösungen das Rückgängigmachen nicht. Wenn ein Benutzer ein Textfeld ändert und dieses dann rückgängig macht oder ein Kontrollkästchen aktiviert und deaktiviert, wird das Formular weiterhin als fehlerhaft betrachtet.

Und wenn Sie mehr Verhalten implementieren möchten, z. B. bestimmte Elemente ignorieren, haben Sie noch mehr Arbeit zu erledigen.

Das Rad nicht neu erfinden:

Bevor Sie über die Implementierung dieser Lösungen und aller erforderlichen Problemumgehungen nachdenken, stellen Sie fest, dass Sie das Rad neu erfinden und auf Probleme stoßen, die andere bereits für Sie gelöst haben.

Wenn Ihre Anwendung bereits jQuery verwendet, können Sie auch getesteten, gepflegten Code verwenden, anstatt Ihren eigenen zu rollen, und für all dies eine Bibliothek eines Drittanbieters verwenden. jQuery's Bist du sicher? Plugin funktioniert super, siehe ihre Demo-Seite . So einfach ist das:

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

Benutzerdefinierte Nachrichten werden nicht überall unterstützt

Beachten Sie, dass Firefox 4 in diesem Dialogfeld keine benutzerdefinierten Nachrichten unterstützt. Ab April 2016 wird Chrome 51 eingeführt, in dem auch benutzerdefinierte Nachrichten entfernt werden .

Einige Alternativen gibt es an anderer Stelle auf dieser Website, aber ich denke, ein Dialog wie dieser ist klar genug:

Möchten Sie diese Seite verlassen?

Von Ihnen vorgenommene Änderungen werden möglicherweise nicht gespeichert.

Leave Stay

Überprüfen Sie das JavaScript- Ereignis onbeforeunload . Es handelt sich um nicht standardmäßiges JavaScript, das von Microsoft eingeführt wurde. Es funktioniert jedoch in den meisten Browsern und die Dokumentation vor dem Herunterladen enthält weitere Informationen und Beispiele.

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

Sie können die Google JQuery Form Serialize-Funktion verwenden. Dadurch werden alle Formulareingaben erfasst und im Array gespeichert. Ich denke diese Erklärung ist genug :)

Universelle Lösung, die keine Konfiguration erfordert, die automatisch alle Eingabemodifikationen erkennt, einschließlich inhaltsbearbeitbarer Elemente:

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

Aufbauend auf der hervorragenden Idee von Wasim A. , Serialisierung zu verwenden. Das Problem dort war, dass die Warnung auch angezeigt wurde, als das Formular gesendet wurde. Dies wurde hier behoben.

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

Es wurde in Chrome und IE 11 getestet.

Basierend auf den vorherigen Antworten und zusammengeschustert von verschiedenen Stellen im Stapelüberlauf, ist hier die Lösung, die ich gefunden habe und die den Fall behandelt, wenn Sie Ihre Änderungen tatsächlich einreichen möchten:

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;

Es ist erwähnenswert, dass IE11 anscheinend erfordert, dass die closeEditorWarningFunktion zurückkehrt, undefineddamit keine Warnung angezeigt wird .

Der folgende Einzeiler hat für mich gearbeitet.

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

Setzen Sie einfach je nach Status Ihrer Anwendung modifiedauf true oder false .

Der folgende Code funktioniert hervorragend. Sie müssen die Eingabeänderungen Ihrer Formularelemente über das ID-Attribut erreichen:

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;

Mit serialize () können Sie eine URL-codierte Textzeichenfolge erstellen, indem Sie Formularwerte serialisieren und prüfen, ob sich das Formular vor dem Entladen geändert hat

$(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?'
    }
})

Siehe diesen Link https://coderwall.com/p/gny70a/alert-when-leaving-page-with-unsaved-form Geschrieben von Vladimir Sidorenko

Wenn Sie der Idee von @codecaster hinzufügen, können Sie dies jeder Seite mit einem Formular hinzufügen (in meinem Fall verwende ich es global, sodass nur auf Formularen diese Warnung angezeigt wird) und seine Funktion in ändern

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

Setzen Sie auch Formulare ein, einschließlich Login und Links zu Abbrechen-Schaltflächen. Wenn eine Person auf Abbrechen drückt oder das Formular sendet, wird die Warnung nicht auch auf jeder Seite mit einem Formular ausgelöst ...

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

Eine ausführliche Erklärung finden Sie hier: http://techinvestigations.redexp.in/comparison-of-form-values-on-load-and-before-close/ Vergleich der Formularwerte beim Laden und -vor-schließen

Der Hauptcode:

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
    }

Kurze Antwort:

let pageModified = true

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

Die Lösung von 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.'
        }
    });
})

... hat die Arbeit für mich spontan in einem komplexen objektorientierten Umfeld erledigt, ohne dass Änderungen erforderlich waren.

Die einzige Änderung, die ich vorgenommen habe, war die Bezugnahme auf das konkrete Formular (nur ein Formular pro Datei) mit dem Namen "formForm" ('form' -> '#formForm'):

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

Besonders gut gelungen ist die Tatsache, dass der Submit-Button "in Ruhe gelassen" wird.

Außerdem funktioniert es bei mir auch mit der neuesten Version von Firefox (Stand 7. Februar 2019).

Die universelle Lösung von Eli Grey wurde erst getestet, nachdem ich den Code vereinfacht hatte

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

  })();

Die Änderungen an seiner werden gelöscht target[defaultValue]und nur target.dataset[defaultValue]zum Speichern des tatsächlichen Standardwerts verwendet.

Und ich habe einen 'gespeicherten' Ereignis-Listener hinzugefügt, in dem das 'gespeicherte' Ereignis von Ihnen selbst ausgelöst wird, wenn Ihre Speicheraktion erfolgreich war.

Diese "universelle" Lösung funktioniert jedoch nur in Browsern, nicht in der Webansicht der App, z. B. in Wechat-Browsern.

Damit es (teilweise) auch in Wechat-Browsern funktioniert, gibt es noch eine weitere Verbesserung:

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

Ich habe es anders gemacht und hier geteilt, damit jemand Hilfe bekommen kann, die nur mit Chrome getestet wurde.

Ich wollte den Benutzer vor dem Schließen der Registerkarte nur warnen, wenn es einige Änderungen gibt.

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

Funktioniert gut, hat aber ein anderes Problem. Als ich das Formular abschicke, erhalte ich die unerwünschte Warnung. Ich habe viele Problemumgehungen gesehen. Dies liegt daran, dass beim Laden vor dem Laden vor dem Senden ein Brand ausgelöst onbeforeunload = nullwird Onclick-Ereignis der Senden-Schaltfläche wird vor diesen beiden Ereignissen ausgelöst, daher habe ich den Code aktualisiert

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

Erstens haben die meisten Browser diese Funktion standardmäßig. Und warum brauchst du das überhaupt? Warum nicht das Formular synchron halten? Ich meine, speichern Sie es bei jeder Änderung, ohne auf die Übermittlung durch den Benutzer zu warten. Wie bei Google-Kontakten. Natürlich, wenn nur alle Felder in der Form obligatorisch sind. Benutzer mögen es nicht, wenn sie zwingen, etwas zu füllen, ohne die Möglichkeit zu haben, wegzugehen, um zu überlegen, ob sie es brauchen. :) :)