web-dev-qa-db-fra.com

HTML - valeur d'entrée conservée après l'actualisation

Habituellement, lorsqu’une actualisation est effectuée sur une page HTML, les valeurs des champs de saisie sont conservées (sauf si vous utilisez Ctrl + F5).

Existe-t-il un en-tête ou un autre type de paramètre qui puisse modifier ce comportement, sans rien modifier du formulaire ou de l'entrée lui-même?

J'ai un site où la valeur d'entrée n'est pas conservée après un rafraîchissement de page dans Production. Toutefois, je n'ai pas ce comportement lorsque je teste ce code sur ma machine locale.

htmlinputrefresh
20
JB Hurteaux

Si vous définissez l'attribut autocomplete=off, le contenu ne sera jamais stocké.

Alternativement, il existe une multitude de façons de réaliser cela avec javascript, en fonction de ce que vous voulez accomplir, que ce soit en effaçant le formulaire entier (utilisez la méthode reset ()) ou en réinitialisant le champ unique.

61
McPherrinM

Vous pouvez ajouter form.reset () au corps onload:

<html>
    <body onload="form1.reset();">
        <form id="form1">
            <textarea id="text"></textarea>
        </form>
    </body>
</html>

Mise à jour: bien que cela puisse être une technique utile, j'ai maintenant découvert que cela ne répond pas réellement à la question de l'auteur.

7
Mark Byers

Pourquoi ne pas définir une valeur par défaut sur DOM prêt avec javascript?

Quelque chose comme

<input name="foo" id="foo" type="text">

$('#foo').val('3')
1
hex

Autant que je sache, il n’existe aucun moyen standard de l’implémenter. Par conséquent, avant de pouvoir le désactiver, vous devez d’abord déterminer comment le site le fait. Ils auraient pu le faire de nombreuses façons, comme le montre la diversité des réponses fournies ici.

Un bon moyen de comprendre ce qui se passe est de réduire le code au plus simple exemple possible reproduisant toujours le problème. Supprimez tous les graphiques, le texte inutile, les feuilles de style et autres mises en forme, le javascript non pertinent, les balises HTML non pertinentes, etc., mais vérifiez toujours que vous pouvez toujours reproduire le problème. Finalement, il restera si peu de code qu'il deviendra évident de savoir ce qui cause la réinitialisation des champs. Vous devrez faire tout cela sur la machine de production, car vous ne pouvez pas le reproduire localement. Pour ce faire, prenez une copie des scripts et renommez-les en index2.html, etc. Assurez-vous de disposer de sauvegardes de votre système de production avant de le faire, en cas de problème.

Si vous ne comprenez toujours pas comment résoudre le problème après avoir effectué cette opération, le code doit être suffisamment petit pour pouvoir être publié ici et que quelqu'un d'autre puisse résoudre le problème.

1
Mark Byers

Vous pouvez réinitialiser la valeur de l'entrée en une chaîne vide comme ceci:

Code HTML:

<form>
    <input type="email" id="input-value" placeholder="Type your email..." required>
    <button type="submit">Submit</button>
</form>

Code JS:

window.onload = function() {
  document.getElementById('input-value').value = '';
}

Il nettoiera la valeur d'entrée chaque fois que la page sera actualisée. J'espère que ça aide!

0
Manuel Abascal

J'utilise normalement ceci:

var reset_input_values = document.querySelectorAll('input');
for (var i = 0; i < reset_input_values.length; i++) {
  reset_input_values[i].value = 'value you want ';
}
0
Xalsar