Warum bleibt das Kontrollkästchen beim erneuten Laden der Seite aktiviert?

80

Ich lade eine Webseite neu, die den folgenden Code enthält:

<label for="showimage">Show Image</label>
<input id="showimage" name="showimage" type="checkbox" value="1" />

Obwohl der an den Browser gesendete HTML-Code bei jedem Neuladen der Seite gleich bleibt, nimmt das Kontrollkästchen immer den aktivierten Wert an, wenn ein Neuladen durchgeführt wurde. Mit anderen Worten, wenn der Benutzer das Kontrollkästchen aktiviert und neu lädt, ist das Kontrollkästchen weiterhin aktiviert.

Gibt es hier etwas Caching?

Bearbeiten : Ich habe die unten stehende Lösung von Gordon Bell ausprobiert und festgestellt, dass dies auch nach dem Entfernen des Werts = "1" noch geschieht. Kann ich sonst noch etwas vermissen?

<label for="showimage">Show Image</label> 
<input id="showimage" name="showimage" type="checkbox" />

firefox

— Schreibgeschützt
quelle

38

Ja, ich glaube, es ist Caching. Ich sehe dieses Verhalten zum Beispiel in Firefox (nicht in Safari, was das wert ist :)).

Sie können die Seite und Bypass - Cache (auf Firefox) mit neu laden CTRL- SHIFT- Rund Sie werden der Prüfwert nicht tragen (eine normale sehen CTRL- Rwird greifen die Informationen aus dem Cache jedoch)

Bearbeiten : Ich konnte diese Serverseite in Firefox deaktivieren und einen Cache-Steuerelement-Header festlegen:

Cache-Control: no-store

Dies scheint die Funktion "Formularwerte speichern" von Firefox zu deaktivieren

— Owen
quelle

Ja, STRG-UMSCHALT-R bewirkt, dass die Kontrollkästchen zurückgesetzt werden. Gibt es eine Möglichkeit zu verhindern, dass dies zwischengespeichert wird?

— Readonly

Ich glaube nicht (zumindest nicht von der Serverseite). Firefox ist sehr aggressiv beim Zwischenspeichern von Dingen. Ich habe es nur geschafft, das Caching in solchen Situationen von der Client-Seite zuverlässig zu beenden

— Owen

2

Es holt Werte aus dem Cache und speichert sie. es sei denn, ich habe falsch verstanden, was Sie sagen wollen.

— Owen

1

Das aggressive Caching von Firefox ist eine wichtige PITA und zieht mich immer wieder auf, wenn ich mich dagegen entwickle. Ich habe den Cache-Control-Header noch nicht ausprobiert, aber wenn er funktioniert, hat der Stackoverflow die Zeit, die ich hier verbringe, nur gerechtfertigt.

— Cruachan

1

Die Werte stammen nicht aus dem Cache wie im heruntergeladenen Dateispeicher von Firefox. Beispiel: Wenn Sie weg navigieren und dann derselben URL folgen, wird die Seite zwischengespeichert, die Werte jedoch nicht. Wenn Sie den Cache brechen, können Sie ein erneutes Laden erzwingen. Es ist jedoch nur ein Zufall, dass dadurch auch die Funktion deaktiviert wird.

— Bobince

163

Fügen Sie autocomplete="off"dem Formularelement auf der Seite hinzu. Der Nachteil ist, dass dies kein gültiges XHTML ist, aber das Problem ohne kompliziertes Javascript behoben wird.

— TALlama
quelle

1

Funktioniert bei mir, wo der Cache-Control-Header nicht funktioniert.

— Lajos Meszaros

7

Von dem, was ich zu lesen , es ist tatsächlich gültig in HTML5. (Ich habe den vorherigen Kommentar positiv bewertet, bevor ich mehr zu diesem Thema gelesen habe.) Verwenden Sie daher die automatische Vervollständigung nach Herzenslust in Kontrollkästchen, wenn Sie HTML5 verwenden.

— EF0

1

Über 10 Jahre später. Diese Antwort ersparte mir Kopfschmerzen!

— Daan van den Bergh

32

set autocomplete = "off" mit js funktioniert auch gut.

Zum Beispiel mit jquery:

$(":checkbox").attr("autocomplete", "off");

— RainChen
quelle

Danke, das hat mir sehr geholfen. :)

— Lyubomyr Shaydariv

1

Ich habe festgestellt, dass Sie benötigen, $("#formId").attr("autocomplete", "off")wo #formIdsich die ID Ihres Formulars befindet.

— Dan Diplo

@DanDiplo Es gibt viele Fälle, in denen wir ein Kontrollkästchen ohne Formular verwenden, daher ist es unlogisch, es anzuwenden ("#formId"). Attr ("Autocomplete", "off")

— Clain Dsilva

2

@ClainDsilva Nur weil Sie können eine Checkbox außerhalb einer Form Mittelwert nicht alles gesagt unlogisch ist. Sie könnten behaupten, dass es nicht vollständig ist (obwohl es für die meisten Szenarien funktioniert), aber zu sagen, dass es nicht logisch ist, ist bizarr, wenn es funktioniert.

— Dan Diplo

@DanDiplo Wenn wir die automatische Vervollständigung nur auf das Kontrollkästchen anwenden können, funktioniert dies einwandfrei. Ich stimme zu, dass Ihre Lösung funktioniert, aber sie gilt auch für alle Elemente im Formularfeld. Dies ist jedoch möglicherweise nicht das beabsichtigte Verhalten. Die Frage wurde auf das Kontrollkästchen allein und nicht auf das gesamte Formular beschränkt. Bei allem Respekt möchte ich nur die beste Lösung finden, die auf die Frage zugeschnitten ist. In diesem Zusammenhang ist es nicht richtig, die automatische Vervollständigung für das gesamte Formular anzuwenden.

— Clain Dsilva

1

Es ist eine nette Funktion von Firefox: Wenn Sie etwas eingeben, aber die Seite neu laden, bleibt der Text im Textbereich. Idem für andere Einstellungen, die Sie gewählt haben.

Leider funktioniert es nicht in SO (wahrscheinlich von JS zurückgesetzt) und dümmeren Browsern wie IE ...

Was eine Lösung vorschlägt: Wenn Sie das wirklich tun müssen, setzen Sie das Formular mit JS zurück. form.reset () erledigt möglicherweise die Aufgabe (verhält sich wie die Schaltfläche zum Zurücksetzen der Eingabe).

— PhiLho
quelle

1

Scheint ein bisschen hackig oder wie ein Spatz mit einer Kanone zu schießen.

— Lajos Meszaros

@ MészárosLajos Was ist Hacky / Overkill und warum sehen Sie es als solches? Sehen Sie etwas einfacher?

— PhiLho

Was ist, wenn das Formular nur teilweise zurückgesetzt werden soll? Ich persönlich möchte den Eingabecache nur für Kontrollkästchen deaktivieren, nicht jedoch für Textfelder. Ich stimme Ihnen voll und ganz zu, dass dies eine gute Funktion von Firefox ist, jedoch nicht für benutzerdefinierte zwei Statusschaltflächen, bei denen es sich im Grunde um neu gestaltete Kontrollkästchen handelt. Eine andere Sache ist, warum Javascript verwenden, wo Sie einfach eine HTML-Eigenschaft verwenden können, um dieses Verhalten zu verhindern? Und ja, ich weiß, "autocomplete = off" macht den HTML-Code ungültig, aber die Seite funktioniert immer noch.

— Lajos Meszaros

3

"Es ist eine nette Funktion von Firefox": Wenn Sie auf einer Suchergebnisseite auf Kontrollkästchen zum Filtern klicken und diese dann neu laden, sind die aktivierten Filter bei angezeigtem Datensatz nicht sinnvoll. -Ich sage, dies ist eine große PITA, wie bereits erwähnt.

— Sharky

Ich würde das nie als eine nette Funktion bezeichnen ... ja, es hilft, wenn Sie viel Text eingeben und dann die Seite aktualisieren müssen, aber wenn Sie eine Benutzeroberfläche entwickeln, ist dies alles andere als eine nette Feature.

— Userfuser

1

Dies ist eine alte Frage, aber immer noch ein aktives Problem für Firefox. Keine der Antworten , die ich gelöst es versucht, aber was tat für mich zu lösen , es war einfach so:

    document.getElementById('formId').reset();

Dadurch wird das Formular bei jedem Laden der Seite einfach auf die Standardoptionen zurückgesetzt. Nicht ideal, da Sie die Kontrolle verlieren, aber es ist das einzige, was dies für mich gelöst hat.

— cmshnrblu
quelle

0

oder anstelle von f5 drücke die Eingabetaste in der Adressleiste :)

— Ionuț Staicu
quelle

1

Oder schlagen Sie dem Benutzer vor, dies zu tun (dies ist eine Frage des Entwicklers).

— Herr TA

Wir können nicht wirklich erwarten, dass die Benutzer die Seite immer mit Strg + Umschalt + R aktualisieren, nicht wahr?

— Lajos Meszaros

0

Dies kann an einem Browser-Caching liegen - sehr nützlich für statische Websites, die nicht zu oft geändert werden, sehr schlecht für dynamische Webanwendungen.
Versuchen Sie es mit diesen beiden Meta-Tags im Kopfbereich der Seite. Das zweite Meta-Tag ist für ältere Browser (IE5) gedacht, die das Meta-Tag "kein Cache" nicht erkennen und obwohl es unterschiedlich ist, das gleiche Ergebnis liefert: Jede Anforderung geht an den Server.

<META HTTP-EQUIV="Pragma" CONTENT="no-cache"> 
<META HTTP-EQUIV="Expires" CONTENT="-1">

— Aleksandar
quelle

Interessieren wir uns wirklich für solche alten Browser wie IE5? Übrigens scheint das Senden der Header mit PHP etwas besser zu sein, da Sie weniger Meta-Tags im <head>

— Lajos Meszaros

2

Seine Antwort war im Jahr 2008, @ MészárosLajos Kommentar war im Jahr 2014. Zu dieser Zeit war es ja wichtig.

— Duniyadnd

0

$ ("# showimage"). prop ("geprüft", falsch);

— Sumit Mehta
quelle

0

die öffentliche Idee, das zu lösen

Formular erstellen & Reset-Taste

<form>
<checkbox>
<reset>
</form>

$(reset).trigger("click");//to clear the cache and input 
$(checkbox).trigger("click");//to mark checkbox

— Mohamed Gomah
quelle