¿Existe una forma válida de W3C para deshabilitar el autocompletado en un formulario HTML?

424

Al usar el xhtml1-transitional.dtddoctype, recopilar un número de tarjeta de crédito con el siguiente HTML

<input type="text" id="cardNumber" name="cardNumber" autocomplete='off'/>

marcará una advertencia en el validador W3C:

no hay atributo "autocompletar".

¿Hay alguna forma estándar / W3C para deshabilitar el navegador de autocompletar en campos sensibles en un formulario?

html standards forms w3c mate b
fuente
10
¿Estás seguro de que lo que quieres hacer es jugar con la configuración de autocompletar del usuario? Si lo tienen encendido, probablemente les guste. Autocompletar es una característica completamente del lado del navegador, al igual que el botón que permite al usuario cambiar el tamaño de fuente, etc. No debe interferir con sus deseos
rmeador
113
¿Incluso para algo tan sensible como el número de tarjeta de crédito? No puedo pensar en muchas personas que deseen que se recuerde eso, especialmente porque el autocompletado está activado de forma predeterminada en la mayoría de los navegadores. Si quieren que se recuerde tanto, pueden usar algo que llene formularios como la barra de herramientas de Google.
mate b
13
Mi caso de uso es ligeramente diferente: estoy rodando mi propio autocompletado y no quiero que choque con el del navegador. Sólo acabo de descubrir que autocomplete = "off" no es válido, pero parece que no hay otra solución simple (inyectándole js es una tontería)
thepeer
13
@rmeador porque a veces queremos ofrecer una alternativa más fácil de usar al cuadro de sugerencia automática estándar. @corydoras, por favor, no presione su peso OSX, no es útil para resolver esta pregunta
Josh M.
12
El problema es que los bancos responsabilizarán al comerciante si se produce una transacción fraudulenta ... incluso si es culpa del cliente al 100%. Por lo tanto, en algunas circunstancias, es legítimo deshabilitar la función para el cliente.
Alexandre H. Tremblay

Respuestas:

422

Aquí hay un buen artículo del MDC que explica los problemas (y las soluciones) para formar el autocompletado. Microsoft ha publicado algo similar aquí también.

Para ser honesto, si esto es algo importante para sus usuarios, 'romper' los estándares de esta manera parece apropiado. Por ejemplo, Amazon usa el atributo 'autocompletar' bastante, y parece funcionar bien.

Si desea eliminar la advertencia por completo, puede usar JavaScript para aplicar el atributo a los navegadores que lo admiten (IE y Firefox son los navegadores importantes) utilizando someForm.setAttribute( "autocomplete", "off" ); someFormElm.setAttribute( "autocomplete", "off" );

Finalmente, si su sitio está usando HTTPS, IE desactiva automáticamente el autocompletado (al igual que otros navegadores, que yo sepa).

Actualizar

Como esta respuesta todavía recibe bastantes votos a favor, solo quería señalar que en HTML5, puede usar el atributo 'autocompletar' en su elemento de formulario. Consulte la documentación en W3C para ello.

Nick Presta
fuente
41
Parece que Firefox no desactiva el autocompletado en https, pero eso es un conocimiento útil. ¡Gracias!
mate b
3
Safari no respeta el atributo autocomplete = "off". Ver stackoverflow.com/questions/22817801/…
Skurpi
1
autocompletepuede usarse no solo en el formelemento , y el offvalor funciona al menos enchromium-40.0.2214.115
x-yuri
El w3c parece estar expandiendo los estándares para autocompletar en HTML5.1 (en borrador a partir de este comentario) w3c.github.io/html/…
Justin Nafe
1
Si nada funciona, use textarea en lugar de textbox para desactivar el autocompletado.
Bsienn
64

Me sorprendería mucho si W3C hubiera propuesto una forma que funcionara con (X) HTML4. La función de autocompletar se basa completamente en el navegador y se introdujo durante los últimos años (mucho después de que se escribió el estándar HTML4).

Sin embargo, no se sorprendería si HTML5 tuviera uno.

Editar: Como pensé, HTML5 hace tener esa característica. Para definir su página como HTML5, use el siguiente doctype (es decir: ponga esto como el primer texto en su código fuente). Tenga en cuenta que no todos los navegadores admiten este estándar, ya que todavía está en forma de borrador.

<!DOCTYPE html>
Henrik Paul
fuente
77
Todos los navegadores esperan que las versiones anteriores de Konqueror lo admitan. Incluso IE6 lo admite. Es el doctype para ir.
BalusC
56

HTML 4 : No

HTML 5 : sí

El atributo autocompletar es un atributo enumerado. El atributo tiene dos estados. El de mapas de palabras clave al estado encendido y el apagado mapas de palabras clave en el estado de apagado. El atributo también puede omitirse. El valor por defecto es la falta de estado. El estado desactivado indica que, de manera predeterminada, los controles de formulario en el formulario tendrán su nombre de campo de autocompletado configurado en desactivado ; el estado autofillactivado indica que, de forma predeterminada, los controles de formulario en el formulario tendrán su nombre de campo establecido en "activado".

Referencia: W3

RuudKok
fuente
@ freestock.tk Sí, es más claro que todos los demás. La simplicidad importa.
OverCoder
32

No, pero el autocompletado del navegador a menudo se activa por el campo que tiene el mismo nameatributo que los campos que se completaron previamente. Si pudiera armar una forma inteligente de tener un nombre de campo aleatorio , la función de autocompletar no podría extraer ningún valor ingresado previamente para el campo.

Si le diera a un campo de entrada un nombre como "email_<?= randomNumber() ?> ", y luego tuviera la secuencia de comandos que recibe este bucle de datos a través de las variables POST o GET buscando algo que coincida con el patrón " email_[some number]", podría realizar esto, y esto tendría ( prácticamente) éxito garantizado, independientemente del navegador .

Phantom Watson
fuente
66
Esto dificultaría las pruebas automáticas.
David Waters
14
Haría las pruebas automáticas más difíciles, solo si su software de pruebas no puede hacer frente a la verificación / lectura de los campos que pueden tener un número aleatorio adjunto. Tal vez sea hora de actualizar su software de prueba automatizado.
corydoras
8
La información de autocompletar aún se guardaría en el directorio de datos del navegador, ¿no?
Joey Adams
2
Presumiblemente. Pero no se esperaría que vuelva a aparecer al usuario.
Phantom Watson
1
Chrome ahora usa el atributo type = "contraseña" en lugar del atributo de nombre para un sitio en particular. Tengo name = "newpassword" autocomplete = 'off' type = "contraseña" y se llena automáticamente. Si cambio el tipo, no hay autocompletar
Enigma Plus
31

No, un buen artículo está aquí en Mozila Wiki .

Seguiría usando lo inválido attribute. Creo que aquí es donde el pragmatismo debería ganarse a la validación.

David Waters
fuente
23

¿Qué hay de configurarlo con JavaScript?

var e = document.getElementById('cardNumber');
e.autocomplete = 'off'; // Maybe should be false

No es perfecto, pero su HTML será válido.

Greg
fuente
8
Usar javascript como solución alternativa a los errores de validación es como barrer el polvo debajo de la alfombra. Si bien el documento HTML puede ser válido, la página HTML + JS resultante no lo será.
fregante
11

Si usa jQuery, puede hacer algo así:

$(document).ready(function(){$("input.autocompleteOff").attr("autocomplete","off");});

y usa la clase autocompleteOff donde quieras:

<input type="text" name="fieldName" id="fieldId" class="firstCSSClass otherCSSClass autocompleteOff" />

Si desea que TODA su entrada sea autocomplete=off, simplemente puede usar eso:

$(document).ready(function(){$("input").attr("autocomplete","off");});
Totoche
fuente
44
Simplemente usar HTML5 doctype es más fácil y mejor.
BalusC
55
de todos modos, esto no es realmente html válido, solo establece el autocompleteatributo (inválido) de una manera diferente que no sea html
matt b
Este código no funciona para mí; He usado lo $('input.autocompleteOff').val('');que parece estar bien.
dqd
55
Usar javascript como solución alternativa a los errores de validación es como barrer el polvo debajo de la alfombra. Si bien el documento HTML puede ser válido, la página HTML + JS resultante no lo será.
fregante
8

Otra forma, que también ayudará con la seguridad, es llamar al cuadro de entrada algo diferente cada vez que lo muestre: como un captha. De esa manera, la sesión puede leer la entrada de una sola vez y Autocompletar no tiene nada para continuar.

Solo un punto con respecto a la pregunta de rmeador sobre si debería interferir con la experiencia del navegador: desarrollamos sistemas de gestión de contactos y CRM, y cuando escribe los datos de otras personas en un formulario, no desea que sugiera constantemente sus propios detalles.

Esto funciona para nuestras necesidades, pero luego tenemos el lujo de decirles a los usuarios que obtengan un navegador decente :)

autocomplete='off'
Enigma Plus
fuente
8

autocomplete="off" Esto debería solucionar el problema para todos los navegadores modernos.

<form name="form1" id="form1" method="post" autocomplete="off"
   action="http://www.example.com/form.cgi">
  [...]
</form>

En las versiones actuales de los navegadores Gecko, el atributo de autocompletar funciona perfectamente. Para versiones anteriores, volviendo a Netscape 6.2, funcionó con la excepción de los formularios con "Dirección" y "Nombre"

Actualizar

En algunos casos, el navegador seguirá sugiriendo valores de autocompletado incluso si el atributo de autocompletar está desactivado. Este comportamiento inesperado puede ser bastante desconcertante para los desarrolladores. El truco para forzar realmente la no autocompletación es asignar una cadena aleatoria al atributo , por ejemplo:

autocomplete="nope"

Como este valor aleatorio no es a valid one, el navegador se dará por vencido.

Documetation

Emilio Gort
fuente
Los navegadores modernos no respetan autocompletar = apagado por elección. :/ Desafortunadamente.
Alexus
@Alexus agregó alguna actualización ... Internet cambió muy rápido
Emilio Gort
6

Usar un atributo aleatorio 'nombre' funciona para mí.

Restablezco el atributo de nombre al enviar el formulario para que aún pueda acceder a él por nombre cuando se envía el formulario. (usando el atributo id para almacenar el nombre)

opznhaarlems
fuente
5

Tenga en cuenta que existe cierta confusión sobre la ubicación del atributo de autocompletar. Se puede aplicar a toda la etiqueta FORM o a las etiquetas INPUT individuales, y esto no estaba realmente estandarizado antes de HTML5 (que permite explícitamente ambas ubicaciones ). Los documentos más antiguos, especialmente este artículo de Mozilla, solo mencionan la etiqueta FORM. Al mismo tiempo, algunos escáneres de seguridad solo buscarán autocompletar en la etiqueta INPUT y se quejarán si falta (incluso si está en el FORMULARIO principal). Aquí se publica un análisis más detallado de este desastre: Confusión sobre los atributos AUTOCOMPLETE = OFF en formularios HTML .

kravietz
fuente
3

No es lo ideal, pero puede cambiar la identificación y el nombre del cuadro de texto cada vez que lo procesa; también tendría que rastrearlo en el lado del servidor para poder obtener los datos.

No estoy seguro de si esto funcionará o no, era solo un pensamiento.

Kieron
fuente
2

Creo que hay una manera más simple. Cree una entrada oculta con un nombre aleatorio (a través de javascript) y configure el nombre de usuario para eso. Repita con la contraseña. De esta manera, su script de back-end sabe exactamente cuál es el nombre de campo apropiado, mientras mantiene el autocompletado en la oscuridad.

Probablemente me equivoque, pero es solo una idea.

Serpientes y Café
fuente
2 
if (document.getElementsByTagName) {
    var inputElements = document.getElementsByTagName("input");
    for (i=0; inputElements[i]; i++) {
        if (inputElements[i].className && (inputElements[i].className.indexOf("disableAutoComplete") != -1)) {
            inputElements[i].setAttribute("autocomplete","off");
        }
    }
}
Jack Tuck
fuente
-1

Esta solución funciona conmigo:

$('form,input,select,textarea').attr("autocomplete", "nope");

si desea usar el autocompletado en esta región: agregue el autocomplete="false"elemento ex:

<input id="search" name="search" type="text" placeholder="Name or Code" autcomplete="false">
Hưng Trịnh
fuente
-5

Válido autocompletar apagado

<script type="text/javascript">
    /* <![CDATA[ */
    document.write('<input type="text" id="cardNumber" name="cardNumber" autocom'+'plete="off"/>');
    /* ]]> */ 
</script>
Diseño web de Southampton
fuente
13
Sin embargo, si un usuario tenía JS apagado, ¿no puede completar un pedido ya que no puede ingresar su número de tarjeta? Yo diría que es mejor complementar el atributo a través de JS: en el peor de los casos, JS desactivado le da al campo del número de tarjeta el potencial de autocompletar, pero al menos pueden hacer un pedido ... solo un pensamiento :)
Terry_Brown
3
Esto ni siquiera es gracioso.
Ricardo Pieper