Me he encontrado con problemas con el comportamiento de autocompletado de Chrome en varios formularios.

Todos los campos en el formulario tienen nombres muy comunes y precisos, como "correo electrónico", "nombre" o "contraseña", y también se han autocomplete="off"configurado.

El indicador de autocompletar ha deshabilitado correctamente el comportamiento de autocompletar, donde aparece un menú desplegable de valores cuando comienza a escribir, pero no ha cambiado los valores con los que Chrome rellena automáticamente los campos.

Este comportamiento estaría bien, excepto que Chrome está llenando las entradas incorrectamente, por ejemplo, llenando la entrada del teléfono con una dirección de correo electrónico. Los clientes se han quejado de esto, por lo que se verifica que está sucediendo en varios casos, y no como algún tipo de resultado de algo que he hecho localmente en mi máquina.

La única solución actual en la que puedo pensar es generar dinámicamente nombres de entrada personalizados y luego extraer los valores en el back-end, pero esto parece una forma bastante extraña de solucionar este problema. ¿Hay alguna etiqueta o peculiaridad que cambie el comportamiento de autocompletar que podría usarse para solucionar esto?

Para las nuevas versiones de Chrome, solo puede poner autocomplete="new-password"su campo de contraseña y listo. Lo he comprobado, funciona bien.

Recibí ese consejo del desarrollador de Chrome en esta discusión: https://bugs.chromium.org/p/chromium/issues/detail?id=370363#c7

PD Tenga en cuenta que Chrome intentará inferir el comportamiento de autocompletar a partir del nombre, la identificación y cualquier contenido de texto que pueda obtener alrededor del campo, incluidas las etiquetas y los nodos de texto arbitrario. Si hay un token de autocompletar como street-addressen contexto, Chrome lo rellenará automáticamente como tal. La heurística puede ser bastante confusa ya que a veces solo se activa si hay campos adicionales en el formulario, o no si hay muy pocos campos en el formulario. También tenga en cuenta que autocomplete="no"parecerá funcionar pero autocomplete="off"no por razones históricas. autocomplete="no"¿Le está diciendo al navegador que este campo debe completarse automáticamente como un campo llamado "no"? Si genera autocompletenombres aleatorios únicos , deshabilita el autocompletado.

Si sus usuarios han visitado formularios incorrectos, su información de autocompletar puede estar dañada . Hacer que ingresen manualmente y corrijan su información de autocompletar en Chrome puede ser una acción necesaria de su parte.

Acabo de descubrir que si tiene un nombre de usuario y contraseña recordados para un sitio, la versión actual de Chrome completará automáticamente su nombre de usuario / dirección de correo electrónico en el campo antes de cualquier type=passwordcampo. No le importa cómo se llame el campo, solo asume el campo antes de que la contraseña sea su nombre de usuario.

Antigua solución

Simplemente use <form autocomplete="off">y evita que la contraseña se complete previamente, así como cualquier tipo de relleno heurístico de campos en función de los supuestos que puede hacer un navegador (que a menudo son incorrectos). A diferencia del uso <input autocomplete="off">que parece ser ignorado por la contraseña de autocompletar (en Chrome, Firefox lo obedece).

Solución actualizada

Chrome ahora ignora <form autocomplete="off">. Por lo tanto, mi solución original (que había eliminado) ahora está de moda.

Simplemente crea un par de campos y hazlos ocultos con "display: none". Ejemplo:

<!-- fake fields are a workaround for chrome autofill getting the wrong fields -->
<input style="display:none" type="text" name="fakeusernameremembered"/>
<input style="display:none" type="password" name="fakepasswordremembered"/>

Luego ponga sus campos reales debajo.

Recuerde agregar el comentario u otras personas en su equipo se preguntarán qué está haciendo.

Actualización de marzo de 2016

Acabo de probar con el último Chrome, todo bien. Esta es una respuesta bastante antigua ahora, pero solo quiero mencionar que nuestro equipo la ha estado utilizando durante años en docenas de proyectos. Todavía funciona muy bien a pesar de algunos comentarios a continuación. No hay problemas con la accesibilidad porque los campos display:nonesignifican que no se enfocan. Como mencioné, debe ponerlos antes de sus campos reales.

Si está utilizando JavaScript para modificar su formulario, necesitará un truco adicional. Muestre los campos falsos mientras manipula el formulario y luego vuelva a ocultarlos un milisegundo más tarde.

Código de ejemplo usando jQuery (suponiendo que le dé una clase a sus campos falsos):

        $(".fake-autofill-fields").show();
        // some DOM manipulation/ajax here
        window.setTimeout(function () {
            $(".fake-autofill-fields").hide();
        },1);

Actualización de julio de 2018

Mi solución ya no funciona tan bien ya que los expertos en anti-usabilidad de Chrome han trabajado duro. Pero nos han arrojado un hueso en forma de:

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

Esto funciona y principalmente resuelve el problema.

Sin embargo, no funciona cuando no tiene un campo de contraseña, sino solo una dirección de correo electrónico. Eso también puede ser difícil para que deje de ponerse amarillo y se llene previamente. La solución de campos falsos se puede utilizar para solucionar esto.

De hecho, a veces necesitas colocar dos lotes de campos falsos y probarlos en diferentes lugares. Por ejemplo, ya tenía campos falsos al comienzo de mi formulario, pero Chrome recientemente comenzó a rellenar mi campo 'Correo electrónico' nuevamente, así que dupliqué y puse más campos falsos justo antes del campo 'Correo electrónico', y eso lo solucionó . Al eliminar el primer o segundo lote de los campos, se vuelve a un llenado automático excesivamente celoso incorrecto.

Actualización mar 2020

No está claro si y cuándo esta solución aún funciona. Parece que todavía funciona a veces, pero no todo el tiempo.

En los comentarios a continuación encontrará algunas sugerencias. Uno que acaba de agregar @anilyeni puede valer más investigación:

Como noté, autocomplete="off"funciona en Chrome 80, SI hay menos de 3 elementos <form>. No sé cuál es la lógica o dónde está la documentación relacionada al respecto.

También este de @dubrox puede ser relevante, aunque no lo he probado:

muchas gracias por el truco, pero actualice la respuesta, ya que display:none;ya no funciona, pero position: fixed;top:-100px;left:-100px; width:5px;sí :)

Actualización ABRIL 2020

El valor especial para Chrome para este atributo está haciendo el trabajo: (probado en la entrada, pero no por mí) autocomplete="chrome-off"

Después de meses y meses de lucha, descubrí que la solución es mucho más simple de lo que podrías imaginar:

En lugar de autocomplete="off"uso autocomplete="false";)

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

Actualización de agosto de 2019 (crédito a @JonEdiger en comentarios)

Nota: mucha información en línea dice que los navegadores ahora consideran que autocompletar = 'false' es lo mismo que autocomplete = 'off'. Al menos a partir de este momento, está evitando el autocompletado para esos tres navegadores.

Configúrelo a nivel de formulario y luego, para las entradas que desea desactivar, establezca un valor no válido como 'ninguno':

<form autocomplete="off"> 
  <input type="text" id="lastName" autocomplete="none"/> 
  <input type="text" id="firstName" autocomplete="none"/>
</form>

A veces, incluso autocomplete=offno evitará rellenar credenciales en campos incorrectos.

Una solución alternativa es deshabilitar la función de autocompletar del navegador mediante el modo de solo lectura y establecer el foco de escritura en foco:

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

El focusevento se produce al hacer clic con el mouse y al recorrer los campos.

Actualizar:

Mobile Safari establece el cursor en el campo, pero no muestra el teclado virtual. Esta nueva solució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

Explicación: ¿El navegador llena automáticamente las credenciales en un campo de texto incorrecto?

llenar las entradas de manera incorrecta, por ejemplo, llenar la entrada del teléfono con una dirección de correo electrónico

A veces 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 el nombre de usuario en el campo de entrada de texto similar más cercano, que aparece antes del campo de contraseña en DOM (solo adivinando por observación). Como el navegador es la última instancia y no puede controlarlo,

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

Si está implementando una función de cuadro de búsqueda, intente configurar el typeatributo de la searchsiguiente manera:

<input type="search" autocomplete="off" />

Esto funciona para mí en Chrome v48 y parece ser un marcado legítimo:

https://www.w3.org/wiki/HTML/Elements/input/search

Prueba esto. Sé que la pregunta es algo antigua, pero este es un enfoque diferente para el problema.

También noté que el problema viene justo por encima del passwordcampo.

Probé los dos métodos como

<form autocomplete="off"> y <input autocomplete="off"> ninguno de ellos me funcionó.

Así que lo arreglé usando el fragmento de abajo: simplemente agregué otro campo de texto justo arriba del campo de tipo de contraseña y lo hice display:none .

Algo como esto:

<input type="text" name="prevent_autofill" id="prevent_autofill" value="" style="display:none;" />
<input type="password" name="password_fake" id="password_fake" value="" style="display:none;" />
<input type="password" name="password" id="password" value="" />

Espero que ayude a alguien.

No sé por qué, pero esto me ayudó y funcionó.

<input type="password" name="pwd" autocomplete="new-password">

No tengo idea de por qué, pero autocompelete = "nueva contraseña" desactiva la función de autocompletar. Funcionó en la última versión de Chrome 49.0.2623.112 .

Para mi simple

<form autocomplete="off" role="presentation">

Lo hizo.

Probado en varias versiones, el último intento fue en 56.0.2924.87

Tienes que agregar este atributo:

autocomplete="new-password"

Enlace fuente: artículo completo

Es muy simple y complicado :)

Google Chrome básicamente busca cada primer elemento de contraseña visible dentro de <form>, <body>y las <iframe>etiquetas para habilitar el relleno automático para ellos, por lo que para deshabilitar esto, debe agregar un elemento de contraseña ficticio como el siguiente:

1. • si su elemento de contraseña dentro de una <form>etiqueta necesita colocar el elemento ficticio como el primer elemento en su formulario inmediatamente después de <form>abrir la etiqueta

   • si su elemento de contraseña no está dentro de una <form>etiqueta, coloque el elemento ficticio como el primer elemento en su página html inmediatamente después de <body>abrir la etiqueta

2. Necesita ocultar el elemento ficticio sin usar css, display:noneasí que básicamente use lo siguiente como un elemento ficticio de contraseña.

   <input type="password" style="width: 0;height: 0; visibility: hidden;position:absolute;left:0;top:0;"/>

Aquí están mis soluciones propuestas, ya que Google insiste en anular todas las soluciones que las personas parecen hacer.

Opción 1: seleccione todo el texto al hacer clic

Establezca los valores de las entradas en un ejemplo para su usuario (p [email protected]. Ej. ), O la etiqueta del campo (p Email. Ej. ) Y agregue una clase llamada focus-selecta sus entradas:

<input type="text" name="email" class="focus-select" value="[email protected]">
<input type="password" name="password" class="focus-select" value="password">

Y aquí está el jQuery:

$(document).on('click', '.focus-select', function(){
  $(this).select();
});

Realmente no puedo ver a Chrome jugando con los valores. Eso sería una locura. Esperemos que esta sea una solución segura.

Opción 2: establezca el valor del correo electrónico en un espacio, luego bórrelo

Suponiendo que tiene dos entradas, como correo electrónico y contraseña, establezca el valor del campo de correo electrónico en " "(un espacio) y agregue el atributo / valor autocomplete="off", luego borre esto con JavaScript. Puede dejar el valor de contraseña vacío.

Si el usuario no tiene JavaScript por algún motivo, asegúrese de recortar su entrada del lado del servidor (probablemente debería estarlo de todos modos), en caso de que no elimine el espacio.

Aquí está el jQuery:

$(document).ready(function() {
  setTimeout(function(){
    $('[autocomplete=off]').val('');
  }, 15);
});

Establecí un tiempo de espera para 15porque 5parecía funcionar ocasionalmente en mis pruebas, por lo que triplicar este número parece una apuesta segura.

Si no se establece el valor inicial en un espacio, Chrome dejará la entrada en amarillo, como si se hubiera llenado automáticamente.

Opción 3 - entradas ocultas

Ponga esto al comienzo del formulario:

<!-- Avoid Chrome autofill -->
<input name="email" class="hide">

CSS:

.hide{ display:none; }

¡Asegúrese de mantener la nota HTML para que sus otros desarrolladores no la eliminen! También asegúrese de que el nombre de la entrada oculta sea relevante.

Use css text-security: disco sin usar type = password .

html

<input type='text' name='user' autocomplete='off' />
<input type='text' name='pass' autocomplete='off' class='secure' />

or

<form autocomplete='off'>
    <input type='text' name='user' />
    <input type='text' name='pass' class='secure' />
</form>

css

input.secure {
    text-security: disc;
    -webkit-text-security: disc;
}

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"

Descubrí que agregar esto a un formulario evita que Chrome use Autocompletar.

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

Encontrado aquí https://code.google.com/p/chromium/issues/detail?id=468153#hc41

Realmente decepcionante que Chrome haya decidido que sabe mejor que el desarrollador cuándo completar automáticamente. Tiene una sensación real de Microsoft.

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

agregar el atributo de solo lectura a la etiqueta junto con el evento onfocus que lo elimina soluciona el problema

Para combinaciones de nombre de usuario y contraseña, este es un problema fácil de resolver. La heurística de Chrome busca el patrón:

<input type="text">

seguido por:

<input type="password">

Simplemente interrumpa este proceso invalidando esto:

<input type="text">
<input type="text" onfocus="this.type='password'">

La solución proporcionada por Mike Nelsons no funcionó para mí en Chrome 50.0.2661.102 m. Simplemente agregando un elemento de entrada del mismo tipo con pantalla: ninguno configurado ya no deshabilita el autocompletado del navegador nativo. Ahora es necesario duplicar el atributo de nombre del campo de entrada en el que desea deshabilitar el autocompletado.

Además, para evitar duplicar el campo de entrada cuando están dentro de un elemento de formulario, debe colocar un elemento deshabilitado en el elemento que no se muestra. Esto evitará que ese elemento se envíe como parte de la acción del formulario.

<input name="dpart" disabled="disabled" type="password" style="display:none;">
<input name="dpart" type="password">
<input type="submit">

En 2016, Google Chrome comenzó a ignorar autocomplete=offaunque está en W3C. La respuesta que publicaron :

La parte difícil aquí es que en algún lugar a lo largo del viaje de la web autocompletar = off se convierte en un valor predeterminado para muchos campos de formulario, sin que se piense realmente si eso fue bueno o no para los usuarios. Esto no significa que no haya casos muy válidos en los que no desee los datos de autocompletado del navegador (por ejemplo, en sistemas CRM), pero en general, los vemos como casos minoritarios. Y como resultado, comenzamos a ignorar autocompletar = off para los datos de Autocompletar de Chrome.

Lo que esencialmente dice: sabemos mejor lo que un usuario quiere.

Abrieron otro error para publicar casos de uso válidos cuando se requiere autocompletar = apagado

No he visto problemas relacionados con el autocompletado en toda mi aplicación B2B, pero solo con la entrada de un tipo de contraseña.

El Autocompletar interviene si hay algún campo de contraseña en la pantalla, incluso uno oculto. Para romper esta lógica, puede poner cada campo de contraseña en su propia forma si no rompe su propia lógica de página.

<input type=name >

<form>
    <input type=password >
</form>

Si tiene problemas para mantener los marcadores de posición pero deshabilita el autocompletado de Chrome, encontré esta solución.

Problema

HTML

<div class="form">
    <input type="text" placeholder="name"><br>
    <input type="text" placeholder="email"><br>
    <input type="text" placeholder="street"><br>
</div>

http://jsfiddle.net/xmbvwfs6/1/

El ejemplo anterior todavía produce el problema de autocompletar, pero si usa el required="required"CSS y algo de CSS, puede replicar los marcadores de posición y Chrome no recogerá las etiquetas.

Solución

HTML

<div class="form">
    <input type="text" required="required">
    <label>Name</label>  
    <br>
    <input type="text" required="required">
    <label>Email</label>    
    <br>
    <input type="text" required="required">
    <label>Street</label>    
    <br>
</div>

CSS

input {
    margin-bottom: 10px;
    width: 200px;
    height: 20px;
    padding: 0 10px;
    font-size: 14px;
}
input + label {
    position: relative;
    left: -216px;
    color: #999;
    font-size: 14px;
}
input:invalid + label { 
    display: inline-block; 
}
input:valid + label { 
    display: none; 
}

http://jsfiddle.net/mwshpx1o/1/

Realmente no me gustaba hacer campos ocultos, creo que hacerlo así se volverá realmente confuso muy rápido.

En los campos de entrada que desea detener la finalización automática, esto funcionará. Haga que los campos sean de solo lectura y en foco elimine ese atributo como este

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

lo que esto hace es que primero tiene que eliminar el atributo de solo lectura seleccionando el campo y, en ese momento, lo más probable es que se complete con su propia entrada del usuario y se detenga el autocompletado para hacerse cargo

Los valores ingresados ​​previamente almacenados en caché por Chrome se muestran como una lista de selección desplegable. Esto se puede desactivar mediante autocompletar = desactivado, la dirección guardada explícitamente en la configuración avanzada de Chrome proporciona una ventana emergente de autocompletar cuando un campo de dirección se enfoca. Esto se puede desactivar mediante autocompletar = "false" Pero permitirá que Chrome muestre los valores en caché en el menú desplegable.

En un campo html de entrada, los siguientes apagarán ambos.

Role="presentation" & autocomplete="off"

Al seleccionar campos de entrada para el autocompletado de direcciones, Chrome ignora los campos de entrada que no tienen el elemento html de etiqueta anterior.

Para garantizar que el analizador de cromo ignore un campo de entrada para la ventana emergente de autocompletar, se puede agregar un botón oculto o control de imagen entre la etiqueta y el cuadro de texto. Esto interrumpirá la secuencia de análisis de cromo de la creación de pares de entrada de etiqueta para autocompletar. Las casillas de verificación se ignoran al analizar los campos de dirección

Chrome también considera el atributo "for" en el elemento de etiqueta. Se puede usar para romper la secuencia de análisis de cromo.

Bueno, dado que todos tenemos este problema, invertí algo de tiempo para escribir una extensión jQuery que funcione para este problema. Google tiene que seguir el marcado html, no nosotros seguimos a Google

(function ($) {

"use strict";

$.fn.autoCompleteFix = function(opt) {
    var ro = 'readonly', settings = $.extend({
        attribute : 'autocomplete',
        trigger : {
            disable : ["off"],
            enable : ["on"]
        },
        focus : function() {
            $(this).removeAttr(ro);
        },
        force : false
    }, opt);

    $(this).each(function(i, el) {
        el = $(el);

        if(el.is('form')) {
            var force = (-1 !== $.inArray(el.attr(settings.attribute), settings.trigger.disable))
            el.find('input').autoCompleteFix({force:force});
        } else {
            var disabled = -1 !== $.inArray(el.attr(settings.attribute), settings.trigger.disable);
            var enabled = -1 !== $.inArray(el.attr(settings.attribute), settings.trigger.enable);
            if (settings.force && !enabled || disabled)
                el.attr(ro, ro).focus(settings.focus).val("");
        }
    });
};
})(jQuery);

Simplemente agregue esto a un archivo como /js/jquery.extends.js e inclúyalo más allá de jQuery. Aplíquelo a cada elemento de formulario al cargar el documento de esta manera:

$(function() {
    $('form').autoCompleteFix();
});

jsfiddle con pruebas

Pruebe el siguiente jQuerycódigo que me ha funcionado.

if ($.browser.webkit) {
    $('input[name="password"]').attr('autocomplete', 'off');
    $('input[name="email"]').attr('autocomplete', 'off');
}

Hay dos piezas para esto. Chrome y otros navegadores recordarán los valores ingresados ​​previamente para los nombres de campo y proporcionarán una lista de autocompletar al usuario en función de eso (en particular, las entradas de tipo de contraseña nunca se recuerdan de esta manera, por razones bastante obvias). Puede agregar autocomplete="off"para evitar esto en cosas como su campo de correo electrónico.

Sin embargo, entonces tiene rellenos de contraseña. La mayoría de los navegadores tienen sus propias implementaciones integradas y también hay muchas utilidades de terceros que proporcionan esta funcionalidad. Esto, no puedes parar. Este es el usuario que elige guardar esta información para que se complete automáticamente más tarde, y está completamente fuera del alcance y la esfera de influencia de su aplicación.

Según el informe de errores de Chromium # 352347, Chrome ya no respeta autocomplete="off|false|anythingelse", ni en los formularios ni en las entradas.

La única solución que funcionó para mí fue agregar un campo de contraseña ficticia :

<input type="password" class="hidden" />
<input type="password" />

Al configurar autocompletea offdebería funcionar aquí, tengo un ejemplo que utiliza Google en la página de búsqueda. Encontré esto del elemento de inspección.

editar : en caso de offque no funcione, intente falseo nofill. En mi caso funciona con Chrome versión 48.0

Aquí hay un truco sucio

Tiene su elemento aquí (agregando el atributo deshabilitado):

<input type="text" name="test" id="test" disabled="disabled" />

Y luego, en la parte inferior de tu página web, agrega JavaScript:

<script>
    setTimeout(function(){
        document.getElementById('test').removeAttribute("disabled");
        },100);
</script>

Solución diferente, basada en webkit. Como ya se mencionó, cada vez que Chrome encuentra un campo de contraseña, completa automáticamente el correo electrónico. AFAIK, esto es independientemente de autocompletar = [lo que sea].

Para evitar esto, cambie el tipo de entrada al texto y aplique la fuente de seguridad del kit web en la forma que desee.

.secure-font{
-webkit-text-security:disc;}

<input type ="text" class="secure-font">

Por lo que puedo ver, esto es al menos tan seguro como input type = password, es copiar y pegar seguro. Sin embargo, es vulnerable al eliminar el estilo que eliminará los asteriscos, por supuesto, input type = password se puede cambiar fácilmente a input type = text en la consola para revelar las contraseñas autocompletadas, por lo que es realmente lo mismo.

La única forma que me funcionó fue: (se requiere jQuery)

$(document).ready(function(e) {
    if ($.browser.webkit) {
        $('#input_id').val(' ').val('');
    }
});

Me he enfrentado al mismo problema. Y aquí está la solución para deshabilitar el nombre de usuario y la contraseña de autocompletar en Chrome (solo probado con Chrome)

    <!-- Just add this hidden field before password as a charmed solution to prevent auto-fill of browser on remembered password -->
    <input type="tel" hidden />
    <input type="password" ng-minlength="8" ng-maxlength="30" ng-model="user.password" name="password" class="form-control" required placeholder="Input password">