Erstellen Sie eine Seite, um den Browser anzuweisen, Eingabewerte nicht zwischenzuspeichern / beizubehalten

116

Die meisten Browser zwischenspeichern Formulareingabewerte. Wenn der Benutzer eine Seite aktualisiert, haben die Eingaben dieselben Werte.

Hier ist mein Problem. Wenn ein Benutzer auf Speichern klickt , überprüft der Server POST-Daten (z. B. geprüfte Produkte) und sendet sie an den Browser zurück, falls sie nicht gültig sind. Wie oben erwähnt, können sie jedoch aufgrund des Browser-Cache ausgewählt werden, auch wenn der Server die Auswahl für einige Werte aufhebt!

Meine Daten haben unsichtbare Kontrollkästchen (bis das übergeordnete Element ausgewählt ist), sodass der Benutzer möglicherweise nicht weiß, dass ein vorheriger Wert noch ausgewählt ist, bis er erneut auf Speichern klickt und eine Fehlermeldung erhält - obwohl der Benutzer der Meinung ist, dass dies nicht der Fall ist . Welches ist irritierend.

Dies kann durch Ctrl+ gelöst werden F5, aber es ist nicht einmal eine Lösung. Gibt es eine automatische / programmatische Möglichkeit, den Browser anzuweisen, Formulareingabedaten auf einem Formular / einer Seite nicht zwischenzuspeichern?

html browser forms browser-cache Königin3
quelle
1
Ist <form autocomplete="off"...eine Option für Sie? Tritt dieses Problem in allen Browsern auf oder nur in einem bestimmten?
David Kolar
Gibt es eine Möglichkeit, diese Frage anhand von Dropdown- <select>Listen zu beantworten ? Ich habe eine Liste und habe eine selectedAuswahl definiert, aber beim Aktualisieren der Seite bleiben die zuvor ausgewählten Optionen erhalten.
Martin
Ich möchte das Gegenteil erreichen - die Eingabewerte jeder Seite auf der Schaltfläche "Zurück" beibehalten (zweimal zurück klicken, um entsprechende Eingaben zu erhalten). Es gibt verschiedene Beispiele für die Verwendung von viel JS-Code (die meiner Meinung nach nicht wirklich funktionieren), aber - gibt es einen einfacheren Weg? Ich habe versucht, autocomplete = "on" sowohl für Formular- als auch für Eingabefelder zu verwenden - funktioniert nicht. Browser ist Chrome.
Dmitry z

Antworten:

196

Setzen Sie die Werte explizit als leer? Beispielsweise:

<input type="text" name="textfield" value="">

Das sollte verhindern, dass Browser Daten dort ablegen, wo sie nicht sein sollten. Alternativ können Sie das autocompleteAttribut dem Formular-Tag hinzufügen :

<form autocomplete="off" ...></form>
DisgruntledGoat
quelle
1
Ich spreche über Kontrollkästchen, daher kann ich den Wert nicht auf "" setzen. Und bedeutet automatische Vervollständigung aus, Formulareingabewerte nicht zu speichern, "wenn der Benutzer F5 drückt", nicht nur "für die Dropdown-Liste für die automatische Vervollständigung"?
Königin3
2
Nach developer.mozilla.org/en/How_to_Turn_Off_Form_Autocompletion , autcompletion = off betrifft "Session Geschichte Caching", zumindest in Gecko. Ich werde testen, ob es für das funktioniert, was ich brauche.
Königin3
1
@ Queen3: Ja, Kontrollkästchen sind ein Problem, da es keine Möglichkeit gibt, explizit "nicht aktiviert" zu sagen. Wenn Sie immer noch Probleme haben, können Sie versuchen checked="false", dass dies in einigen Browsern funktioniert. Eine andere Alternative ist die Verwendung von Javascript / jQuery, um alle Kontrollkästchen beim Laden der Seite explizit zu deaktivieren.
DisgruntledGoat
1
@ Queen3, du meinst "Autocomplete = off" nicht "Autocompletion = off"
Matt Baker
2
Alle Antworten und Vorschläge haben bei mir nicht funktioniert. Mit Chrom und Entwicklung von .net
Hakan
45

Aus einer Stapelüberlaufreferenz

Es hat nicht mit value = "" funktioniert, wenn der Browser den Wert bereits speichert und Sie ihn hinzufügen sollten.

Für ein Eingabe-Tag gibt es das Attribut Autocomplete, das Sie festlegen können:

<input type="text" autocomplete="off" />

Sie können die automatische Vervollständigung auch für ein Formular verwenden.

shareef
quelle
9
In Chrome scheint autocomplete="off"es keine Auswirkung zu haben, wenn es für einzelne Formularelemente verwendet wird - selbst wenn das valueAttribut explizit leer gesetzt ist, und beim Senden eines Cache-Control: Must-RevalidateHeaders hatte dies keine Auswirkung. Ich musste das autocomplete="off"Attribut auf das <form>Element selbst anwenden , um dieses Verhalten in Chrome zu unterdrücken.
mindplay.dk
Ich habe Autocomplete = "off" auf Formular, aber es hat nicht für mich funktioniert
Kingsley Simon
Ich brauche mehr Informationen @KingsleySimon wie Browser, und Sie haben möglicherweise einige Einstellungen in Ihrem Browser, die das richtige Verhalten verhindern
Shareef
1
Es scheint, dass sich das Verhalten des Browsers geändert hat: developer.mozilla.org/en-US/docs/Web/Security/…
David
und beachten Sie die HTML-gültige Form. und zum Beispiel ist es keine Form in einem anderen etc
shareef
10

Ein anderer Ansatz wäre, das Formular mit JavaScript direkt nach dem Formular im HTML zurückzusetzen:

<form id="myForm">
  <input type="text" value="" name="myTextInput" />
</form>

<script type="text/javascript">
  document.getElementById("myForm").reset();
</script>
pmko
quelle
8

Grundsätzlich gibt es zwei Möglichkeiten, den Cache zu leeren:

<form autocomplete="off"></form>

oder

$('#Textfiledid').attr('autocomplete', 'off');
Anand Dwivedi
quelle
6

Dies funktionierte bei mir in neueren Browsern:

autocomplete="new-password"
erikrunia
quelle