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

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, tal vez agregando alguna 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 de un formulario presentación.

La mayoría de los principales navegadores y gestores 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 se rompió.

Hace mucho tiempo que la mayoría de los administradores de contraseñas comenzaron a ignorar autocomplete=off, y ahora los navegadores están comenzando para hacer lo mismo solo para 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 fueron dejados en blanco intencionalmente por el usuario.

¿Qué debe hacer un desarrollador web?

• Si puede mantener todos los campos de contraseña en una página por sí mismos, eso es un gran comienzo, ya que parece que la presencia de un campo de contraseña es el disparador principal para que el autocompletado de usuario/pase se active. De lo contrario, lea los consejos a continuación.
• Safari observa que hay 2 campos de contraseña y desactiva la autocompletación en este caso, asumiendo que debe ser un formulario de cambio de contraseña, no un formulario de inicio de sesión. Así que asegúrese de usar 2 campos de contraseña (nuevo y confirmar nuevo) para cualquier formulario donde permita

• Chrome 34, desafortunadamente, intentará autocompletar los campos con user / pass cada vez que vea un campo de contraseña. Este es un error bastante malo que con suerte, van a cambiar el comportamiento de Safari. Sin embargo, agregar esto a la parte superior de su formulario parece deshabilitar el autocompletado de contraseña:

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

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

A veces incluso autocompletar=off no impediría rellenar las credenciales en campos incorrectos, pero no el campo de usuario o apodo.

Esta solución se suma a la publicación de apinstein sobre el comportamiento del navegador.

Corregir el autocompletar del navegador en solo lectura y establecer escritura en foco (clic y tabulador)

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

Actualizar: Mobile Safari establece el cursor en el campo, pero no muestra el teclado virtual. Nueva solución funciona como antes, pero maneja virtual teclado:

<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

Debido a que el navegador rellena automáticamente las credenciales al campo de texto incorrecto!?

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

Este readonly-fix 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 estándar XHTML.

La solución para Chrome es agregar autocomplete="new-password" a la contraseña de tipo de entrada.

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 autocompleta los datos si encuentra un cuadro de escriba password , 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 funcionaba, pero el navegador en realidad no trajo la cambio.

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

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

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

Es particularmente importante desactivarlo en los campos de 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 manera de suministrarlo es leerlo de la tarjeta de crédito física, demostrando 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 detalles de su tarjeta, e incluso en su propia máquina, un sitio web malicioso podría robar autocompletar datos.

Tendría que pedir que difiera con esas respuestas que dicen para evitar deshabilitar el autocompletado.

Lo primero que se 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 PCI-DSS. Además, si la máquina local de un usuario está comprometida, cualquier dato de autocompletar puede ser trivialmente obtenido por un atacante debido a que se almacena en el clear.

Ciertamente hay un argumento para la usabilidad, sin embargo, hay un equilibrio muy fino cuando se trata de qué campos de formulario deben tener desactivado el autocompletado 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');

Simplemente 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 lugar de autocomplete="off" simplemente use autocomplete="false"

Tan simple como eso, y funciona como un encanto en Google Chrome, así!

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

" Si usted es el usuario del formulario antes mencionado y desea volver a habilitar la funcionalidad de autocompletar, utilice el 'recordar contraseña' bookmarklet from this bookmarklets page . Elimina todos los atributos autocomplete="off" de todos los formularios de la página. Mantener peleando la buena batalla!"

Realmente usamos la idea de sasb 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 entiende la implicación de contraseñas guardadas automáticamente o no está prestando atención no puede dejar accidentalmente su información de inicio de sesión fácilmente accesible. Por supuesto, esto fue antes de la idea de la navegación privada que es empezando a aparecer en IE8, FF3. 1, etc. Aún así, muchos médicos se ven obligados a utilizar navegadores de la vieja escuela en los hospitales con ÉL que no va a cambiar.

Entonces, hicimos que la página de inicio de sesión generara nombres de campos aleatorios que solo funcionarían para ese post. Sí, es menos conveniente, pero solo está golpeando al usuario sobre la cabeza sobre no almacenar información de inicio de sesión en terminales públicos.

Creo que autocomplete=off está soportado en HTML 5.

Pregúntate por qué quieres hacer esto, aunque puede tener sentido en algunas situaciones, pero no lo hagas solo por el hecho de hacerlo.

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

Como usuario que elige tener un navegador para recordar (la mayor parte de) mi información, me parece molesto si su sitio no recuerda la mía.

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

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

Simplemente desactive autocompletar en el form y luego enciéndalo para cualquier input que 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>

Era una forma no estándar de hacer esto (creo que Mozilla e Internet Explorer todavía lo apoyan), pero jugar con las expectativas de los usuarios es una mala idea.

Si el usuario ingresa los datos de su tarjeta de crédito en un formulario y luego deja que otra persona use ese navegador, no es su preocupación. :)

Esto funciona para mí.

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

También podemos usar esta estrategia en otros controles como text, select etc

Añadiendo el

autocomplete="off"

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

Probado en:

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

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.

Añadiendo autocomplete="off" no se va a cortar.

Cambie el atributo de tipo de entrada a type="search".
Google no aplica relleno automático a entradas con un tipo de búsqueda.

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

En algún caso, el navegador seguirá sugiriendo valores de autocompletado incluso si el atributo autocompletar está desactivado. Este inesperado el comportamiento puede ser bastante desconcertante para los desarrolladores. El truco para realmente forzar el no-completion es asignar una cadena aleatoria al atributo así :

autocomplete="nope"

Use un nombre y un id no estándar para los campos, por lo que en lugar de "name" tenga "name_". Los navegadores entonces no lo verán como el campo de nombre. La mejor parte de esto es que puede hacer esto para algunos pero no todos los campos y se autocompletará algunos pero no todos los campos.

Pruebe estos también si simplemente autocomplete="off" no funciona:

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

No puedo creer que esto siga siendo un problema tanto tiempo después de que se haya reportado. Las soluciones anteriores no funcionaron para mí, ya que safari parecía saber cuándo el elemento no se mostraba o no estaba en 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!

Este es un problema de seguridad que los navegadores ignoran ahora. Los navegadores identifican y almacenan el contenido utilizando nombres de entrada, incluso si los desarrolladores consideran que la información es confidencial y no debe almacenarse. Hacer un nombre de entrada diferente entre 2 solicitudes resolverá el problema (pero todavía se guardará en la caché del navegador y también aumentará la caché del navegador). Pedir 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 aplicado 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>

El servidor luego procesa variables post 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];
    }
}

El valor se puede acceder como de costumbre

var_dump($_POST['username']);

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

Todo funciona como un encanto, incluso si los navegadores actualizaciones, quieren ignorar autocompletar o no. Esa ha sido la mejor manera de solucionar el problema para mí.

La mejor solución:

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

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

Evitar autocompletar un campo:

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

Explicación: autocomplete continúa el trabajo en <input>, autocomplete="off" no funciona, pero puedes cambiar off a una cadena aleatoria, como nope.

Funciona 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

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

Agregar esto dentro de un <form> funciona (al menos por ahora):

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

Intenta añadir

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

Además de

Autocomplete = " off "

A la(s) entrada (es) que no desea recordar los datos del 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');" >

Probado en las últimas versiones de los principales navegadores, es decir,Google Chrome, Mozilla Firefox, Microsoft Edge, etc. y trabajando sin ningún problema. Espero que esto ayude...

Puede utilizar en la entrada.

Por ejemplo;

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

Así que aquí está:

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

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