¿Cómo deshabilita el autocompletado del navegador en el campo de formulario web / etiqueta de entrada?

¿Cómo se deshabilita autocompleteen los principales navegadores para un input(o form field) específico ?

Firefox 30 ignora las autocomplete="off"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 pregunta si desea guardar una contraseña. Las contraseñas no se guardan sin el permiso del usuario.
• Somos el tercer navegador en implementar 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 autocompleteevita que los datos del formulario se almacenen en caché en navegadores antiguos.

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

Además 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, puede quitar esa parte antes de procesarlos en el lado del servidor. Esto evitaría que el navegador web encuentre contexto para su campo y también podría ayudar a prevenir ataques XSRF porque un atacante no podría adivinar los nombres de campo para el envío de un formulario.

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=offa sus páginas de inicio de sesión "con fines 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 se completan automáticamente estaba rota.

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 de autocompletar 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 el usuario dejó en blanco intencionalmente.

¿Qué debe hacer un desarrollador web?

• Si puede mantener todos los campos de contraseña en una página por sí mismos, es un gran comienzo, ya que parece que la presencia de un campo de contraseña es el desencadenante principal para que el usuario / pase complete automáticamente. De lo contrario, lea los consejos a continuación.
• Safari se da cuenta de que hay 2 campos de contraseña y desactiva 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">

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

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 alternativa se suma a la publicación de apinstein sobre el comportamiento del navegador.

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 establece el cursor en el campo, pero no muestra el teclado virtual. New Fix 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();  }" />

Demo 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,

Esta corrección de solo lectura anterior funcionó para mí.

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

Esto funcionará en Internet Explorer y Mozilla FireFox, la desventaja es que no es el estándar XHTML.

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

Ejemplo:

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

Chrome siempre completa automáticamente los datos si encuentra un cuadro de tipo contraseña , lo suficiente para indicarlo autocomplete = "new-password".

Esto funciona bien para mi.

Nota: asegúrese de F12que 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.

Como otros han dicho, la respuesta es autocomplete="off"

Sin embargo, creo que vale la pena decir por qué es una buena idea usar esto en ciertos casos como algunas respuestas a esto y duplicar preguntas han sugerido que es mejor no desactivarlo.

No se debe dejar a los usuarios detener los navegadores que almacenan números de tarjetas de crédito. Demasiados usuarios ni siquiera se darán cuenta de que es un problema.

Es particularmente importante desactivarlo en los campos para códigos de seguridad de tarjetas de crédito. Como esta página dice:

"Nunca almacene el código de seguridad ... su valor depende de la presunción de que la única forma de suministrarlo es leerlo de la tarjeta de crédito física, lo que demuestra que la persona que lo suministra realmente posee la tarjeta".

El problema es que si se trata de una computadora pública (cibercafé, biblioteca, etc.) es fácil para otros usuarios robar los datos de su tarjeta, e incluso en su propia máquina, un sitio web malicioso podría robar datos de autocompletado .

He resuelto la lucha interminable con Google Chrome con el uso de caracteres aleatorios. Cuando siempre renderiza autocompletar con una cadena aleatoria, nunca recordará nada.

<input name="name" type="text" autocomplete="rutjfkde">

Espero que ayude a otras personas.

Tendría que rogar que difiera con las respuestas que dicen evitar la desactivación de autocompletar.

Lo primero que debe mencionar es que el autocompletado que no se deshabilita explícitamente en los campos del formulario de inicio de sesión es un error de PCI-DSS. Además, si la máquina local de un usuario se ve comprometida, cualquier dato de autocompletado puede ser obtenido trivialmente por un atacante debido a que se almacena en la memoria.

Ciertamente hay un argumento para la usabilidad, sin embargo, hay un equilibrio muy fino cuando se trata de qué campos de formulario deberían tener autocompletado deshabilitado y cuáles no.

Tres opciones: Primero:

<input type='text' autocomplete='off' />

Segundo:

<form action='' autocomplete='off'>

Tercero (código javascript):

$('input').attr('autocomplete', 'off');

En una nota relacionada o en realidad, en la nota completamente opuesta:

"Si usted es el usuario del formulario mencionado anteriormente y desea volver a habilitar la funcionalidad de autocompletar, use el marcador de 'recordar contraseña' de esta página de marcadores . Elimina todos los autocomplete="off"atributos de todos los formularios de la página. ¡Siga luchando por la buena batalla! "

Realmente usamos sasb la idea de para un sitio. Era una aplicación web de software médico para administrar el consultorio de un médico. Sin embargo, muchos de nuestros clientes eran cirujanos que usaban muchas estaciones de trabajo diferentes, incluidas terminales semipúblicas. Por lo tanto, querían asegurarse de que un médico que no comprende la implicación de las contraseñas guardadas automáticamente o que no está prestando atención no pueda dejar accidentalmente accesible su información de inicio de sesión. Por supuesto, esto fue antes de la idea de navegación privada que está comenzando a aparecer en IE8, FF3.1, etc. Aun así, muchos médicos se ven obligados a usar los navegadores de la vieja escuela en hospitales con TI que no cambiará.

Entonces, la página de inicio de sesión generó nombres de campo aleatorios que solo funcionarían para esa publicación. Sí, es menos conveniente, pero solo está golpeando al usuario sobre la cabeza por no almacenar información de inicio de sesión en terminales públicas.

Ninguna de las soluciones funcionó para mí en esta conversación.

Finalmente descubrí una solución HTML pura que no requiere Javascript , funciona en navegadores modernos (excepto IE; tenía que haber al menos 1 captura, ¿verdad?) Y no requiere que desactive el autocompletado para todo el formulario.

Simplemente desactive el autocompletado en formy luego actívelo para cualquiera inputque desee que funcione dentro del formulario. Por ejemplo:

<form autocomplete="off">
    <!-- these inputs will not allow autocomplete and chrome 
         won't highlight them yellow! -->
    <input name="username"  />
    <input name="password" type="password" />
    <!-- this field will allow autocomplete to work even 
         though we've disabled it on the form -->
    <input name="another_field" autocomplete="on" />
</form>

Solo establece autocomplete="off". Hay una muy buena razón para hacer esto: ¡Desea proporcionar su propia funcionalidad de autocompletar!

He estado probando soluciones infinitas, y luego encontré esto:

En vez de autocomplete="off" simplemente usarautocomplete="false"

¡Tan simple como eso, y funciona como un encanto en Google Chrome también!

Esto funciona para mi.

<input name="pass" type="password" autocomplete="new-password" />

También podemos usar esta estrategia en otros controles como texto, seleccionar, etc.

Creo que autocomplete=offes compatible con HTML 5.

Sin embargo, pregúntese por qué quiere hacer esto: puede tener sentido en algunas situaciones, pero no lo haga solo por hacerlo.

Es menos conveniente para los usuarios y ni siquiera es un problema de seguridad en OS X (mencionado por Soren a continuación). Si le preocupa que las personas tengan sus contraseñas robadas de forma remota, un registrador de pulsaciones de teclas aún podría hacerlo aunque su aplicación use autcomplete=off.

Como un usuario que elige que un navegador recuerde (la mayoría de) mi información, me parecería molesto si su sitio no recordara el mío.

Además de

autocomplete="off"

Utilizar

readonly onfocus="this.removeAttribute('readonly');"

para las entradas que no desea que recuerden datos de formulario (username , password, etc.) como se muestra a continuación:

<input type="text" name="UserName" autocomplete="off" readonly 
    onfocus="this.removeAttribute('readonly');" >

<input type="password" name="Password" autocomplete="off" readonly 
    onfocus="this.removeAttribute('readonly');" >

Espero que esto ayude.

La mejor solucion:

Evite el nombre de usuario (o correo electrónico) y la contraseña de autocompletar:

<input type="email" name="email"><!-- Can be type="text" -->
<input type="password" name="password" autocomplete="new-password">

Prevenir autocompletar un campo:

<input type="text" name="field" autocomplete="nope">

Explicación: autocompletecontinúa trabajando en <input>, autocomplete="off"no funciona, pero puede cambiar offa una cadena aleatoria, como nope.

Trabaja en:

• Cromo: 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63 y 64

• Firefox: 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57 y 58

Un poco tarde para el juego ... pero me encontré con este problema y probé varios fallos, pero este funciona para mí encontrado en MDN

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

autocomplete="nope"

Agregar el

autocomplete="off"

a la etiqueta del formulario deshabilitará el autocompletado del navegador (lo que se escribió anteriormente en ese campo) de todos input campos dentro de ese formulario en particular.

Probado en:

• Firefox 3.5, 4 BETA
• Internet Explorer 8
• Cromo

Agregar autocomplete="off"no va a ser suficiente.

Cambie el atributo de tipo de entrada a type="search".
Google no aplica el autocompletado a las entradas con un tipo de búsqueda.

Utilice un nombre y una identificación no estándar para los campos, de modo que en lugar de "nombre" tenga "nombre_". Los navegadores no lo verán como el campo de nombre. La mejor parte es que puede hacer esto en algunos pero no en todos los campos y completará automáticamente algunos pero no todos los campos.

Para evitar el XHTML no válido, puede establecer este atributo usando javascript. Ejemplo usando jQuery:

<input type="text" class="noAutoComplete" ... />

$(function() {
    $('.noAutoComplete').attr('autocomplete', 'off');
});

El problema es que los usuarios sin javascript obtendrán la funcionalidad de autocompletar.

intente esto también si simplemente autocomplete="off"no funciona:

autocorrect="off" autocapitalize="off" autocomplete="off"

No puedo creer que esto siga siendo un problema mucho después de que se haya informado. Las soluciones anteriores no funcionaron para mí, ya que Safari parecía saber cuándo el elemento no se mostraba o no estaba en la pantalla, sin embargo, lo siguiente sí funcionó para mí:

<div style="height:0px; overflow:hidden; ">
  Username <input type="text" name="fake_safari_username" >
  Password <input type="password" name="fake_safari_password">
</div>

Espero que sea útil para alguien!

Entonces aquí está:

function turnOnPasswordStyle() {
  $('#inputpassword').attr('type', "password");
}

<input oninput="turnOnPasswordStyle()" id="inputpassword" type="text">

Este es un problema de seguridad que los navegadores ignoran ahora. Los navegadores identifican y almacenan contenido utilizando nombres de entrada, incluso si los desarrolladores consideran que la información es confidencial y no debe almacenarse. Hacer que un nombre de entrada sea diferente entre 2 solicitudes resolverá el problema (pero aún se guardará en la memoria caché del navegador y también aumentará la memoria caché del navegador). Pedirle al usuario que active o desactive las opciones en la configuración de su navegador no es una buena solución. El problema se puede solucionar en el backend.

Aquí está mi solución. Un enfoque que he implementado en mi marco. Todos los elementos de autocompletar se generan con una entrada oculta como esta:

<? $r = rmd5(rand().mocrotime(TRUE)); ?>
<form method="POST" action="./">
    <input type="text" name="<? echo $r; ?>" />
    <input type="hidden" name="__autocomplete_fix_<? echo $r; ?>" value="username" />
    <input type="submit" name="submit" value="submit" />
</form>

Luego, el servidor procesa variables de publicación como esta:

foreach ($_POST as $key => $val)
{
    if(preg_match('#^__autocomplete_fix_#', $key) === 1){
        $n = substr($key, 19);
        if(isset($_POST[$n]))$_POST[$val] = $_POST[$n];
    }
}

Se puede acceder al valor como siempre

var_dump($_POST['username']);

Y el navegador no podrá sugerir información de la solicitud anterior o de usuarios anteriores.

Todo funciona de maravilla, incluso si las actualizaciones de los navegadores quieren ignorar el autocompletado o no. Esa ha sido la mejor manera de solucionar el problema para mí.

Ninguno de los hacks mencionados aquí me funcionó en Chrome. Aquí hay una discusión sobre el problema: https://code.google.com/p/chromium/issues/detail?id=468153#c41

Agregando esto dentro de una <form>obra (al menos por ahora):

<div style="display: none;">
    <input type="text" id="PreventChromeAutocomplete" name="PreventChromeAutocomplete" autocomplete="address-level4" />
</div>

Puede usar en la entrada.

Por ejemplo;

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