Créer une page pour indiquer au navigateur de ne pas mettre en cache / conserver les valeurs d'entrée


116

La plupart des navigateurs mettent en cache les valeurs d'entrée des formulaires. Ainsi, lorsque l'utilisateur actualise une page, les entrées ont les mêmes valeurs.

Voici mon problème. Lorsqu'un utilisateur clique sur Enregistrer , le serveur valide les données POSTÉES (par exemple les produits vérifiés) et, si elles ne sont pas valides, les renvoie au navigateur. Cependant, comme indiqué ci-dessus, même si le serveur efface la sélection pour certaines valeurs, elles peuvent toujours être sélectionnées à cause du cache du navigateur!

Mes données ont des cases à cocher invisibles (jusqu'à ce que l'élément parent soit sélectionné), de sorte que l'utilisateur peut même ne pas savoir qu'une valeur précédente est toujours sélectionnée, jusqu'à ce qu'il clique à nouveau sur Enregistrer et reçoive un message d'erreur - même si l'utilisateur pense que ce n'est pas le cas. Ce qui est irritant.

Cela peut être résolu en faisant Ctrl+ F5, mais ce n'est même pas une solution. Existe-t-il un moyen automatique / programmatique de dire au navigateur de ne pas mettre en cache les données d'entrée de formulaire sur un formulaire / une page?


1
Une <form autocomplete="off"...option pour vous? Ce problème se produit-il dans tous les navigateurs, ou juste un en particulier?
David Kolar

Existe-t-il un moyen de répondre à cette question en faisant référence à des <select>listes déroulantes . J'ai une liste et j'ai défini un selectedchoix, mais l'actualisation de la page conserve les options sélectionnées précédemment.
Martin

Je veux réaliser le contraire - conserver les valeurs d'entrée de chaque page sur le bouton de retour (cliquez deux fois en arrière pour obtenir les entrées en conséquence). Il existe divers exemples d'utilisation de beaucoup de code JS (qui ne fonctionnent pas vraiment à mon humble avis) mais - y a-t-il un moyen plus simple? J'ai essayé autocomplete = "on" sur les champs de formulaire et de saisie - ne fonctionne pas. Le navigateur est Chrome.
Dmitry z le

Réponses:


197

Définissez-vous explicitement les valeurs comme vides? Par exemple:

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

Cela devrait empêcher les navigateurs de mettre des données là où elles ne le devraient pas. Vous pouvez également ajouter l' autocompleteattribut à la balise form:

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

1
Je parle de cases à cocher, donc je ne peux pas définir la valeur sur "". Et, la saisie semi-automatique signifie-t-elle ne pas stocker les valeurs d'entrée du formulaire "lorsque l'utilisateur appuie sur F5", pas seulement "pour la liste déroulante de saisie semi-automatique"?
queen3

2
Selon developer.mozilla.org/en/How_to_Turn_Off_Form_Autocompletion , autcompletion = off affecte "la mise en cache de l'historique de session", du moins dans Gecko. Je vais tester si cela fonctionne pour ce dont j'ai besoin.
queen3

1
@ queen3: Oui, les cases à cocher sont un problème car il n'y a aucun moyen de dire explicitement "non coché". Si vous rencontrez toujours des problèmes, vous pouvez essayer checked="false", cela peut fonctionner dans certains navigateurs. Une autre alternative consiste à utiliser Javascript / jQuery pour décocher explicitement toutes les cases au chargement de la page.
DisgruntledGoat

1
@ queen3, vous voulez dire "autocomplete = off" et non "autocompletion = off"
Matt Baker

2
Toutes les réponses et suggestions n'ont pas fonctionné pour moi. Utilisation de chrome et développement .net
hakan

45

À partir d' une référence de débordement de pile

Cela ne fonctionnait pas avec value = "" si le navigateur enregistre déjà la valeur, vous devez donc l'ajouter.

Pour une balise d'entrée, vous pouvez définir l'attribut autocomplete:

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

Vous pouvez également utiliser la saisie semi-automatique pour un formulaire.


9
Dans Chrome, il semble autocomplete="off"n'avoir aucun effet lorsqu'il est utilisé sur des éléments de formulaire individuels - même avec un valueattribut explicitement défini en blanc, et lors de l'envoi d'un en- Cache-Control: Must-Revalidatetête, cela n'a eu aucun effet. J'ai dû appliquer l' autocomplete="off"attribut à l' <form>élément lui-même pour supprimer ce comportement dans Chrome.
mindplay.dk

j'ai fait autocomplete = "off" sur le formulaire mais cela n'a pas fonctionné pour moi
Kingsley Simon

j'ai besoin de plus d'informations @KingsleySimon comme navigateur, et vous pouvez avoir certains paramètres sur votre navigateur qui empêchent le comportement correct
shareef

1
il semble que le comportement du navigateur ait changé: developer.mozilla.org/en-US/docs/Web/Security/…
david

et notez la forme valide html. et par exemple ce n'est pas une forme à l'intérieur d'un autre etc
shareef

10

Une autre approche consisterait à réinitialiser le formulaire en utilisant JavaScript juste après le formulaire dans le HTML:

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

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

8

Fondamentalement, il existe deux façons de vider le cache:

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

ou

$('#Textfiledid').attr('autocomplete', 'off');

6

Cela a fonctionné pour moi dans les nouveaux navigateurs:

autocomplete="new-password"
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.