web-dev-qa-db-fra.com

Bug avec Firefox - L'attribut désactivé de l'entrée ne se réinitialise pas lors de l'actualisation

J'ai trouvé ce que je pense être un bogue avec Firefox et je me demande si c'est vraiment un bogue, ainsi que des solutions de contournement pour cela.

Si vous créez une page Web de base avec la source suivante:

<html>
  <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
  </head>
  <body>
    <div>
      <input id="txtTest" type="text" />
      <input type="button" onclick="$('#txtTest').attr('disabled','disabled');" value="Set Disabled (jQuery)" />
      <input type="button" onclick="document.getElementById('txtTest').disabled = true;" value="Set Disabled (js)" />
      <input type="button" onclick="$('#txtTest').removeAttr('disabled');" value="Remove Disabled" />
    </div>
  </body>
</html>

Si vous disable le textbox dynamiquement, puis actualisez la page, le textbox restera désactivé au lieu de revenir à son état d'origine de non désactivé. J'ai essayé cela dans IE8 et Chrome et ceux-ci se comportent comme je m'y attendais, en réinitialisant le textbox sur non désactivé lorsque je rafraîchis.

Une autre information intéressante est qu'elle fait toujours la même chose si l'entrée est un checkbox au lieu d'un textbox.

htmlfirefoxinputtextbox
100
Stephen Mesa

Il s'agit d'un "fonctionnalité" de Firefox qui se souvient des valeurs d'entrée de formulaire lors des rafraîchissements de page. Pour corriger ce problème, vous définissez simplement autocomplete="off" sur le formulaire contenant les entrées, ou juste directement sur l'entrée.

Cela empêche la saisie semi-automatique de fonctionner et empêche le navigateur de se souvenir de l'état des champs de saisie.

Alternativement, vous pouvez simplement "rafraîchir" en cliquant sur CTRL + F5. Cela réinitialisera complètement la page actuelle.

123
Stephen Mesa

Pour gérer le bouton de retour, procédez comme suit (à partir de ici )

    window.addEventListener('pageshow', PageShowHandler, false);
    window.addEventListener('unload', UnloadHandler, false);

    function PageShowHandler() {
        window.addEventListener('unload', UnloadHandler, false);
    }

    function UnloadHandler() {
        //enable button here
        window.removeEventListener('unload', UnloadHandler, false);
    }
9
Joshua Fox

Comme mentionné précédemment, vous devez ajouter autocomplete="off" à vos boutons.

Voici un extrait sh + Perl pour automatiser ceci dans le cas de <button>s dans vos fichiers/modèles HTML (sous certaines hypothèses):

find /path/to/html/templates -type f -name '*.html' -exec Perl -pi -e \
  's/(?<=<button )(.*?)(?=>)/@{[(index($1,"autocomplete=")!=-1?"$1":"$1 autocomplete=\"off\"")]}/g' \
  {} +

Les hypothèses sont les suivantes:

  • Ouverture <button> les balises commencent et se terminent sur la même ligne. Si ce n'est pas le cas (c'est-à-dire qu'ils peuvent être répartis sur plusieurs lignes), remplacer /g avec /gs devrait aider (le modificateur s provoque . pour correspondre également aux nouvelles lignes)

  • HTML valide (par exemple, il n'y a pas de caractères amusants entre < et >) et aucun échappé supérieur à (>) à l'intérieur de la balise d'ouverture.

1
phk