Error con Firefox: el atributo de entrada deshabilitado no se restablece al actualizar

103

Encontré lo que creo que es un error con Firefox y me pregunto si realmente es un error, así como alguna solución para esto.

Si crea una página web básica con la siguiente fuente:

<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 disablela textboxdinámica y actualice la página, el textboxpermanecerá desactivado lugar de restaurarlo a su estado original de no discapacitados. Probé esto en IE8 y Chrome y se comportan como era de esperar, restableciendo eltextbox posterior a no deshabilitada cuando actualizo.

Otro dato interesante es que todavía hace lo mismo si la entrada es a en checkboxlugar de a textbox.

html firefox input textbox Stephen Mesa
fuente
2
¿Estás seguro de que no es solo la "función" de Firefox donde recuerda el estado de los inputelementos cuando simplemente actualizas?
30 de
@thirtydot: Yo también me preguntaba sobre eso, así que también intenté experimentar con la configuración dinámica del atributo "tamaño", y eso se restablece al actualizar, al igual que todos los demás navegadores. Entonces parece que lo que he descubierto hasta ahora es que Firefox conservará el atributo deshabilitado, así como el valor real de la entrada, pero no el tamaño ...
Stephen Mesa
5
¡Vaya, tienes razón! Configuré autocomplete = "off" en la entrada y esto ya no sucede. ¡Es bastante inconveniente que Firefox lo active de forma predeterminada!
Stephen Mesa
3
Sí, había olvidado que puedes desactivarlo con autocomplete="off". Esta publicación de blog me resulta familiar, así que definitivamente me he encontrado con esto antes. Deberías escribir una respuesta a tu propia pregunta (¿o debería hacerlo yo?)
thirtydot
1
Hay un informe de error Mozilla abierto acerca de esto: bugzilla.mozilla.org/show_bug.cgi?id=654072
cvrebert

Respuestas:

126

Esta es una "característica" de Firefox que recuerda los valores de entrada del formulario en las actualizaciones de la página. Para corregir este comportamiento, simplemente establezca autocomplete="off"en el formulario que contiene las entradas, o simplemente directamente en la entrada.

Esto evita que la función de autocompletar funcione y evita que el navegador recuerde el estado de los campos de entrada.

Alternativamente, puede simplemente "actualizar" haciendo clic en CTRL + F5. Esto restablecerá completamente la página actual.

Stephen Mesa
fuente
4
Acabo de encontrar este problema cuando el usuario hace clic en el botón Atrás, parece autocomplete="off"que no funciona en ese caso.
solarc
1
no quiero un formulario, solo tengo un botón y Firefox "recuerda" que está deshabilitado ... molesto. Puedo restablecerlo a través de JS pero ... feo.
vsync
@vsync Intente configurarlo en el botón / elemento de entrada. ¡Debería funcionar también!
Henrik Heimbuerger
4
Incluso tienes que hacer esto con los botones. Me cuesta creer que esto sea una característica y no un error.
Liam
1
esto también afecta las entradas ocultas también
Liam
10

Para lidiar con el botón de retroceso, haga esto (desde aquí )

    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);
    }
Joshua Fox
fuente
No sé por qué esta respuesta solo tiene un voto positivo mientras que la otra respuesta tiene 99. Restaurar el estado deshabilitado al descargar es mejor que deshabilitar el autocompletado, ya que el autocompletado es una funcionalidad deseable.
Nick
Creo que //enable button hereaquí es redundante; Mi comprensión de los documentos referidos es que simplemente la presencia del detector de eventos evitará que la página se almacene en BFcache.
myf
Tenga en cuenta que agregar un controlador de descarga tiene otros efectos secundarios en Firefox: developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/1.5/…
robocat
2

Como se mencionó anteriormente, debe agregar autocomplete="off"a sus botones.

Aquí hay un fragmento de código sh+ perlpara automatizar esto en el caso de <button>s en sus archivos / plantillas HTML (bajo algunas suposiciones):

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

Los supuestos son:

  • Las <button>etiquetas de apertura comienzan y terminan en la misma línea. Si este no es el caso (es decir, pueden estar divididos en varias líneas), reemplazar /gcon /gsdebería ayudar (el smodificador también hace .coincidir las nuevas líneas)

  • HTML válido (p. Ej., No hay caracteres divertidos entre <y >) ni mayor que ( >) sin escape dentro de la etiqueta de apertura.

phk
fuente
0

De hecho, este es un error abierto en Firefox. También hay una nota en MDN:autocomplete (desplácese hacia abajo hasta el segundo cuadro amarillo):

Nota: El autocompleteatributo también controla si Firefox, a diferencia de otros navegadores, persistirá en el estado de deshabilitación dinámica y (si corresponde) en la verificación dinámica de un <input>elemento, <textarea>elemento o la totalidad de las <form>cargas de la página. La función de persistencia está habilitada de forma predeterminada. Establecer el valor del autocompleteatributo enoff inhabilita esta función. Esto funciona incluso cuando el atributo de autocompletar normalmente no se aplicaría en virtud de su tipo. Consulte el error 654072 .

Si está utilizando Bootstrap, es posible que le interese la

str
fuente