Löschen Sie alle Felder in einem Formular, wenn Sie mit der Zurück-Schaltfläche des Browsers zurückkehren

Ich brauche eine Möglichkeit, alle Felder in einem Formular zu löschen, wenn ein Benutzer die Zurück-Schaltfläche des Browsers verwendet. Im Moment merkt sich der Browser alle letzten Werte und zeigt sie an, wenn Sie zurückkehren.

Weitere Erläuterungen dazu, warum ich dies benötige Ich habe ein deaktiviertes Eingabefeld, dessen Wert mithilfe eines Algorithmus automatisch generiert wird, um ihn innerhalb einer bestimmten Datengruppe eindeutig zu machen. Sobald ich das Formular gesendet habe und die Daten in die Datenbank eingegeben wurden, sollte der Benutzer nicht mehr denselben Wert verwenden können, um dasselbe Formular zu senden. Daher habe ich das Eingabefeld an erster Stelle deaktiviert. Wenn der Benutzer jedoch die Zurück-Schaltfläche des Browsers verwendet, merkt sich der Browser den letzten Wert und derselbe Wert bleibt im Eingabefeld erhalten. Daher kann der Benutzer das Formular mit demselben Wert erneut senden.

Was ich nicht verstehe, ist, was genau passiert, wenn Sie die Zurück-Taste des Browsers drücken. Es scheint, als würde die gesamte Seite aus dem Cache abgerufen, ohne jemals den Server zu kontaktieren, wenn die Seitengröße innerhalb des Browser-Cache-Limits liegt. Wie stelle ich sicher, dass die Seite unabhängig von den Browsereinstellungen vom Server geladen wird, wenn Sie die Zurück-Taste des Browsers drücken?

Moderne Browser implementieren einen sogenannten Back-Forward-Cache (BFCache). Wenn Sie auf die Schaltfläche "Zurück / Vorwärts" klicken, wird die eigentliche Seite nicht neu geladen (und die Skripte werden nie erneut ausgeführt).

Wenn Sie etwas tun müssen, wenn der Benutzer die Vor- / Zurück-Tasten drückt, achten Sie auf BFCache pageshowund pagehideEreignisse:

window.addEventListener("pageshow", () => {
  // update hidden input field
});

Weitere Informationen zu Gecko- und WebKit- Implementierungen.

Eine andere Möglichkeit ohne JavaScript besteht darin, <form autocomplete="off">zu verhindern, dass der Browser das Formular mit den letzten Werten erneut ausfüllt.

Siehe auch diese Frage

Getestet nur mit einem einzigen <input type="text"> innerhalb des Formulars, funktioniert aber gut in aktuellen Chrome und Firefox, leider nicht in IE10.

Ich bin auf diesen Beitrag gestoßen, als ich nach einer Möglichkeit gesucht habe, das gesamte Formular in Bezug auf den BFCache (Zurück / Vorwärts-Schaltflächen-Cache) in Chrome zu löschen.

Zusätzlich zu dem, was Sim geliefert hat, erforderte mein Anwendungsfall, dass die Details mit Clear Form on Back Button kombiniert werden mussten . .

Ich fand, dass der beste Weg, dies zu tun, darin besteht, dem Formular zu erlauben, sich wie erwartet zu verhalten, und ein Ereignis auszulösen:

$(window).bind("pageshow", function() {
    var form = $('form'); 
    // let the browser natively reset defaults
    form[0].reset();
});

Wenn Sie die inputEreignisse nicht verarbeiten , um ein Objekt in JavaScript oder etwas anderes zu generieren, sind Sie fertig. Wenn Sie jedoch die Ereignisse abhören, müssen Sie zumindest in Chrome changeselbst ein Ereignis auslösen (oder ein Ereignis, das Sie behandeln möchten, einschließlich eines benutzerdefinierten Ereignisses):

form.find(':input').not(':button,:submit,:reset,:hidden').trigger('change');

Das muss nach dem hinzugefügt werden reset, um etwas Gutes zu tun.

Wenn Sie auch mit älteren Browsern kompatibel sein müssen, funktioniert die Option "pageshow" möglicherweise nicht. Der folgende Code hat bei mir funktioniert.

$(window).load(function() {
    $('form').get(0).reset(); //clear form data on page load
});

Das hat bei mir funktioniert.

$(window).bind("pageshow", function() {
    $("#id").val('');
    $("#another_id").val('');
});

Ich hatte dies zunächst in der $(document).readySektion meiner Abfrage, die auch funktionierte. Ich habe jedoch gehört, dass nicht alle Browser $(document).readybeim Drücken der Zurück-Taste ausgelöst werden, also habe ich sie herausgenommen. Ich kenne die Vor- und Nachteile dieses Ansatzes nicht, habe ihn jedoch in mehreren Browsern und auf mehreren Geräten getestet, und es wurden keine Probleme mit dieser Lösung gefunden.

Die folgenden Links könnten Ihnen helfen.

Browser-Zurück-Schaltfläche stellt leere Felder wieder her , Formular auf Zurück- Schaltfläche löschen ?

Hoffe das hilft ... Viel Glück