¿Cómo se desactiva el Autocompletar del navegador en el campo de formulario web/etiqueta de entrada

html forms browser autocomplete


¿Cómo deshabilita el autocomplete en los principales navegadores para una input específica (o form field )?




Answer 1 nlucaroni


Firefox 30 ignora autocomplete="off" para las contraseñas, optando por preguntar al usuario si la contraseña debe almacenarse en el cliente. Tenga en cuenta el siguiente comentario del 5 de mayo de 2014:

  • El administrador de contraseñas siempre le pregunta si desea guardar una contraseña. Las contraseñas no se guardan sin el permiso del usuario.
  • Somos el tercer navegador que implementa este cambio,después de IE y Chrome.

De acuerdo con la documentación de Mozilla Developer Network , el atributo de elemento de formulario booleano autocomplete evita que los datos del formulario se almacenen en caché en navegadores antiguos.

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



Answer 2 Ben Combee


Además de autocomplete=off , también puede hacer que los nombres de los campos de su formulario sean aleatorizados por el código que genera la página, quizás agregando una cadena específica de la sesión al final de los nombres.

Cuando se envía el formulario,puedes quitar esa parte antes de procesarlo en el lado del servidor.Esto evitaría que el navegador web encuentre el contexto de su campo y también podría ayudar a prevenir ataques XSRF porque un atacante no sería capaz de adivinar los nombres de los campos para el envío de un formulario.




Answer 3 apinstein


La mayoría de los principales navegadores y administradores de contraseñas (correctamente, en mi humilde opinión) ahora ignoran autocomplete=off .

¿Por qué? Muchos bancos y otros sitios web de "alta seguridad" agregaron autocomplete=off a sus páginas de inicio de sesión "por motivos de seguridad", pero esto en realidad disminuye la seguridad, ya que hace que las personas cambien las contraseñas en estos sitios de alta seguridad para que sean fáciles de recordar (y por lo tanto, descifrar ) ya que el autocompletado estaba roto.

Hace mucho tiempo, la mayoría de los administradores de contraseñas comenzaron a ignorar autocomplete=off , y ahora los navegadores comienzan a hacer lo mismo solo para las entradas de nombre de usuario / contraseña.

Desafortunadamente,los errores en las implementaciones autocompletadas insertan información de nombre de usuario y/o contraseña en campos de formulario inapropiados,causando errores de validación de formulario,o peor aún,insertando accidentalmente nombres de usuario en campos que fueron dejados en blanco intencionalmente por el usuario.

¿Qué debe hacer un desarrollador web?

  • Si puedes mantener todos los campos de contraseñas en una página por sí mismos,es un gran comienzo,ya que parece que la presencia de un campo de contraseñas es el principal desencadenante para que la autocompletación de usuario/pasar se active.Por lo demás,lee los consejos que se dan a continuación.
  • Safari se da cuenta de que hay 2 campos de contraseña y deshabilita el autocompletado en este caso, suponiendo que debe ser un formulario de cambio de contraseña, no un formulario de inicio de sesión. Tan solo asegúrese de usar 2 campos de contraseña (nuevo y confirmar nuevo) para cualquier formulario donde permita
  • Desafortunadamente, Chrome 34 intentará completar automáticamente los campos con usuario / contraseña cada vez que vea un campo de contraseña. Este es un error bastante malo que, con suerte, cambiarán el comportamiento de Safari. Sin embargo, agregar esto en la parte superior de su formulario parece deshabilitar la contraseña de autocompletar:

    <input type="text" style="display:none">
    <input type="password" style="display:none">

Aún no he investigado a fondo el IE o el Firefox,pero estaré encantado de actualizar la respuesta si otros tienen información en los comentarios.




Answer 4 dsuess


A veces incluso autocomplete = off que no impide llenar de credenciales en los campos erróneos, pero no campo de usuario o apodo.

Esta solución se suma al post de Apinstein sobre el comportamiento de los navegadores.

arregle el autocompletado del navegador en solo lectura y configure el foco de escritura en foco (clic y pestaña)

 <input type="password" readonly  
     onfocus="this.removeAttribute('readonly');"/>

Actualización:Mobile Safari pone el cursor en el campo,pero no muestra el teclado virtual.La nueva corrección funciona como antes,pero maneja el teclado virtual:

<input id="email" readonly type="email" onfocus="if (this.hasAttribute('readonly')) {
    this.removeAttribute('readonly');
    // fix for mobile safari to show virtual keyboard
    this.blur();    this.focus();  }" />

Demostración en vivo https://jsfiddle.net/danielsuess/n0scguv6/

// UpdateEnd

¿Porque el navegador llena automáticamente las credenciales en el campo de texto incorrecto?

Noto este comportamiento extraño en Chrome y Safari, cuando hay campos de contraseña en la misma forma. Supongo que el navegador busca un campo de contraseña para insertar sus credenciales guardadas. Luego, llena automáticamente (solo adivinando debido a la observación) el campo de entrada de texto más cercano, que aparece antes del campo de contraseña en DOM. Como el navegador es la última instancia y no puede controlarlo,

Este arreglo de sólo lectura de arriba funcionó para mí.




Answer 5 Geynen


La solución para Chrome es agregar autocomplete="new-password" a la contraseña del tipo de entrada. Por favor, consulte el siguiente ejemplo.

Example:

<form name="myForm"" method="post">
   <input name="user" type="text" />
   <input name="pass" type="password" autocomplete="new-password" />
   <input type="submit">
</form>

Chrome siempre autocompleta los datos si encuentra un cuadro de tipo contraseña , solo lo suficiente para indicar para ese cuadro autocomplete = "new-password" .

Esto funciona bien para mí.

Nota: asegúrese de que con F12 sus cambios surtan efecto, muchas veces los navegadores guardan la página en caché, esto me dio una mala impresión de que no funcionó, pero el navegador en realidad no trajo los cambios.