Desactivar el autocompletado de Chrome


620

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?


66
No es un duplicado. Este maneja deshabilitar el autocompletado, ese maneja el estilo del color de autocompletar ...
Nicu Surdu

17
autocomplete = "false" en lugar de autocomplete = "off" según la respuesta de Kaszoni Ferencz, vota por la gente.
codificador aproximado

77
Mira el número de respuestas a esta pregunta: debería decirte algo: estás luchando en una batalla perdida. Esto ya no es un problema de Chrome, Firefox y otros han seguido su ejemplo. Te guste o no, debes aceptar la decisión de la industria de los navegadores, esa forma de autocompletar es la elección del usuario: puedes luchar contra ellos, pero perderás. Al final del día, la pregunta que debe hacerse no es cómo puedo subvertir el autocompletado, sino cómo creo formularios que funcionen bien con el autocompletado. Sus preocupaciones sobre la seguridad no son suyas, sino de los usuarios.
mindplay.dk

21
Lo sentimos, pero la respuesta de @ mindplay.dk es contraproducente. Mi situación es que tengo usuarios que han iniciado sesión en mi sitio y una página en el sitio es para que ingresen información de cuenta / contraseña para otros sistemas. Cuando coloco un cuadro de diálogo para que ingresen uno nuevo, su información de inicio de sesión para mi sitio se completa, lo cual es completamente incorrecto y causará problemas si / cuando los usuarios ingresan esa información sin darse cuenta. Los dos no tienen nada que ver con El uno al otro. En este caso, el navegador está haciendo algo contrario a lo que quiere el usuario.
Mike K

8
@ mindplay.dk: mi aplicación web es una aplicación de gestión de flujo de trabajo para el lugar de trabajo, por lo tanto, no, las preocupaciones sobre la seguridad son mías por las que tengo que preocuparme, como lo exige la alta gerencia y todos los empleados, también conocidos como "los usuarios", deben cumplirlas. " Sin embargo, pedirles que configuren Chrome, IE o cualquier otro navegador dejará huecos en el proceso de autenticación, ya que pueden, intencionalmente o no, terminar usando el autocompletar. NO todas las aplicaciones web son del mismo tipo, con los mismos tipos de usuarios o inquietudes.
PoloHoleSet

Respuestas:


906

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.


115
'nueva contraseña' funcionó para mí después de probar 'apagado' y 'falso'
Kevin

26
Esta es la única solución de trabajo ahora. Falso, y fuera, ya no funciona. Debería ser la respuesta correcta ahora.
David

55
La razón por la que esto funciona es porque el equipo de Chrome está tratando de crear los valores recomendados de autocompletar, como se muestra en @ developers.google.com/web/fundamentals/design-and-ui/input/… El valor de "nueva contraseña" es uno de los pocos que tienen una lógica adicional que lo rodea, y en este caso, es suspender el autocompletado pero aún así permitir sugerencias de autocompletar
Deminetix

30
No funciona a partir del 1.13.2018 Versión 63.0.3239.132 (Versión oficial) (64 bits)
PellucidWombat

37
Solo quería decir ... Después de tropezar con este problema ... Chrome es un verdadero trabajo. Así que ahora debemos saltar por los aros para deshabilitar la funcionalidad que se suponía que debía seguir siendo opcional. En qué mundo se necesitaría el autocompletado en una aplicación comercial donde la dirección es nueva / diferente cada vez. Google se está volviendo tan malo como Microsoft.
Eddy Howard

700

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"


77
Estaba tan seguro de que esto funcionaría, ya que usted explicó perfectamente el autocompletado heurístico que estoy experimentando con el campo de entrada antes de la contraseña. Desafortunadamente, no funcionó para mí, puse autocomplete = "off" tanto en el formulario como en todas las entradas y todavía se llenan. La única solución que funcionó para mí está en el enlace anterior de goodeye. (colocando una segunda entrada de tipo oculto = "contraseña" antes de que la contraseña arroje los controles heurísticos de Chrome)
Parlamento

19
Esto solía funcionar bien, yo también lo usé, pero desde una actualización de Chrome hace algún tiempo (entre entonces y el 5 de mayo), Chrome ignora la propiedad del formulario :(
Tominator

13
Google tomó la decisión en (Chrome v34, creo) de hacer que la política SIEMPRE ahora ignore autocompletar = "off", incluidas las directivas de nivel de formulario ... eso estaría bien si realmente tuviera los malditos campos correctos.
Jammer

10
try autocomplete = "false" not autocomplete = "off"
roughcoder

243
Este atributo también es obligatorio:autocomplete="I told you I wanted this off, Google. But you would not listen."
rybo111

265

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>

8
¡Trabajó para mi! Pero hay un comentario importante: tengo 5 campos en mi página web: nombre, dirección, código postal, teléfono y correo electrónico. Cuando incluí autocompletar = 'falso' en el Formulario y en el campo Nombre, todavía funcionó. Sin embargo, cuando incluí el autocompletar = 'falso' también en el campo Dirección, ¡finalmente dejó de autocompletarse! Por lo tanto, debe colocar la propiedad de autocompletar no en el campo de inicio de sesión o nombre, sino también en los siguientes campos. (Trabajó en Chrome 43.0.2357.81 a partir del 2015-05-27)
Dvd Franco

45
SI ESTO NO FUNCIONA PARA USTED: Tenga en cuenta que hay 2 formas en que Chrome "ayuda" a los usuarios. AUTOCOMPLETE se solicitará en función de la presentación previa en el mismo formulario presentado y afectará a las personas que usan el formulario más de una vez. Autocompletar está deshabilitado con autocompletar = "off". AUTOFILL se solicitará en función de la libreta de direcciones de formularios similares completados anteriormente en otras páginas. También resaltará los campos que está cambiando. El autocompletado puede deshabilitarse con autocompletar = "false".
genkilabs

44
Esto no funciona para mí (Versión 43.0.2357.124 m). Probablemente fue un descuido de Google, que ahora se ha resuelto. Parecen estar pensando "el usuario siempre tiene la razón" en el sentido de que quieren autocompletar todo. El problema es que mi forma de registro guarda los datos del usuario al igual que la forma de la conexión hace, que es lo más definitivamente no lo que el usuario quiere ...
rybo111

3
¡YEP funciona en Chrome 43.0.2357! Este comportamiento en Chrome es muy molesto, y esta solución me llevó un tiempo descubrirlo. Gracias por tu respuesta.
Adriano Rosa

3
no funciona con Chrome 44.0.2403.157. ¿Cómo puede esta característica funcionar y no funcionar con diferentes versiones? Es ridículo
Mattijs

120

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í.


12
qué gran solución :) deberías reemplazar jquery con esto: this.removeAttribute ("clase")
Roey

Utilicé esto para evitar que un dropdwonlist se complete automáticamente. Pero también se rediseñó solo para que no se viera. ¡Buena idea!
CómodamenteNumb

1
@Clint: mi fragmento de código anterior elimina el atributo de solo lectura tan pronto como el usuario ingresa al campo (por clic del mouse o tecla de tabulación). Supongo que se refiere a un campo, que está protegido automáticamente , pero que el usuario no toca. ¿Cuál es el propósito de este campo? ¿Realmente necesita protección? Dependiendo del escenario, eliminar todos los atributos de solo lectura en el envío puede ser una opción. ¿Puedes agregar un comentario más específico sobre tu problema? Quizás pueda ayudarte :)
consulta

1
Si estás usando JavaScript. ¿por qué no solo establece el valor dummyy luego lo elimina nuevamente? Agregar y quitar solo lectura suena como un movimiento peligroso: ¿qué pasa si el navegador no quiere que te concentres en él?
rybo111

1
Aparentemente, Google está tratando de tomar decisiones para todos nosotros aquí, cerraron el ticket con respecto a autocompletar = "off": bugs.chromium.org/p/chromium/issues/detail?id=468153 . Pero hay otro ticket abierto para recopilar casos de usuarios válidos para deshabilitar el autocompletado, responda este ticket para aumentar la conciencia sobre este problema aquí: bugs.chromium.org/p/chromium/issues/detail?id=587466
Norman Xu

80

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


¡Si! :) ¡Gracias! Esto funciona en Chrome 67.0.3396.99. (Creo que su enlace debería ser: w3.org/wiki/HTML/Elements/input/search a partir de septiembre de 2018).
Andy King el

44
¡Finalmente! todavía funciona Versión 69.0.3497.100 (Versión oficial) (64 bits) ¡Esta debería ser la respuesta real!
Venson

1
todo el mundo tiene razón y está equivocado, y al mismo tiempo debe escribir autocompletar = "off" dentro de la etiqueta <form autocomplete = "off"> en lugar de la entrada y esto detendrá el comportamiento de autocompletar
demopix

2
También funciona si configura autocompletar = "off" en el formulario (para cambiar ese formulario predeterminado por todo el formulario) y luego solo necesita configurar type = "search" en <input>
John

99
Después de Chrome versión 72.XX, esta solución no funciona. Encuentre la última
solución

65

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.


1
Este funcionó para mí (por ahora). Descubrí que he usado alrededor de media docena de hacks diferentes con el tiempo, y después de un tiempo Chrome decide que quiere vencer ese hack. Por lo tanto, se necesita uno nuevo, como este. En mi aplicación, tengo un formulario de actualización de perfil con campos de correo electrónico y contraseña que se dejarán en blanco a menos que el usuario desee realizar cambios. Pero cuando Chrome se llena automáticamente, coloca el ID de usuario en el campo "confirmación por correo electrónico", lo que resulta en todo tipo de condiciones de error, que conducen a otras condiciones de error, ya que el usuario se queja de intentar hacer lo correcto.
Jeffrey Simon

2
Una explicación rápida de por qué funciona este truco (por ahora): Chrome ve la primera entrada type = password y la completa automáticamente, y supone que el campo directamente antes de este DEBE ser el campo userhame, y completa automáticamente ese campo con el nombre de usuario. @JeffreySimon esto debería explicar el fenómeno de ID de usuario en el campo de confirmación de correo electrónico (estaba viendo lo mismo en mi formulario).
MrBoJangles

1
@kentcdodds: no estoy seguro de lo que quieres decir con que ya no funciona. Su jsbin no tiene un campo de contraseña, por lo que es una situación diferente. He estado usando esta solución durante años y más recientemente noté que era necesaria y funcionó para mí la semana pasada (marzo de 2015).
Mike Nelson

1
¡Hurra! ¡Una solución que parece funcionar! Aconsejaría dar el nombre al campo passwordy tener actual_passwordel campo legítimo, ya que Google ahora parece estar mirando el name. Sin embargo, esto significa que Chrome no guardará la contraseña, que es la funcionalidad que realmente quiero . AAAAARRRRGHH!
rybo111

2
Actualización: Esto continúa funcionando durante un año desde la última vez que lo implementé. Podemos tener un ganador sólido aquí.
MrBoJangles

48

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 .


Actualicé mi Chrome y aún funciona para mí. 50.0.2661.87 (64 bits)
Tauras el

Desafortunadamente, al enviar el formulario (o cuando los campos de entrada están ocultos / eliminados), Chrome luego solicita guardar el inicio de sesión modificado.
sibbl

Funciona en la versión 51.0.2704.79 m
Geoffrey Hale

Santa mierda, ¿por qué esto funciona? ¿Es eso un error? porque lo probé aquí y lo coloqué solo en una entrada y trabajé tanto para el inicio de sesión como para la contraseña, pero solo lo puse en la contraseña
Leandro RR

No tengo idea. Creo que es una "cosa" de cromo hecha por desarrolladores. Quizás estoy equivocado.
Tauras

46

Para mi simple

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

Lo hizo.

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


Se agregó la versión @ArnoldRoa, ha estado en nuestro sitio desde el día en que la publiqué y tenía pocas versiones donde funcionaba bien. ¿Qué versión está utilizando? PC / Mac?
Kuf

No funciona en 57.0.2987.110. Chrome lo resalta en amarillo y rellena el campo con mi contraseña guardada. Pero la página es una página de administración de usuarios, no una página de inicio de sesión.

1
@Dummy Lo probé ahora en Chrome Latest (57) y todavía funciona para mí. ¿Hiciste algo especial con los campos de entrada? ¿pones tu código en algún lugar que pueda intentar reproducir?
Kuf

3
Versión 64.0.3282.186 (compilación oficial) (64 bits) Windows. 01-03-2018 NO FUNCIONA para desactivar el autocompletar.
Billy Jean



19

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:

    • 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

  1. 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;"/>

1
Gran trabajo, ¿cómo descubriste el algoritmo de Chrome? Me acabo de enterar de que mi antiguo método que cambia el valor con JS después de que la página se ha cargado con un temporizador setTimeout ya no funciona. Pero esto funciona perfecto!

Desafortunadamente, no funciona para entradas de TextBox normales.
eYe

1
en realidad está funcionando solo establezca la propiedad de nombre;)
Fareed Alnamrouti

En Chrome 58 esto no funciona. Ancho de uso: 1px. Si el campo de contraseña está completamente oculto, Chrome lo rellena automáticamente normalmente. También z-index: -999 podría ser útil para que no se superponga a ningún contenido.
cristiancastrodc

1
Funciona en Chrome 67.0 en componente html angular<form *ngIf="!loggedIn()" #loginForm="ngForm" class="navbar-form navbar-right" (ngSubmit)="login()"><input type="password" style="width: 0;height: 0; visibility: hidden;position:absolute;left:0;top:0;"/><input type="text" #username="ngModel" placeholder="Username" class="form-control" required autocomplete="off" name="username" [(ngModel)]="model.username"><input type="password" #password="ngModel" placeholder="Password" class="form-control" required autocomplete="off" name="password" [(ngModel)]="model.password">...
Junior Mayhé

19

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 your@email.com. 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="your@email.com">
<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.


@Vaia: ¿ha intentado navegar a otra página y luego presionar el botón Atrás? Obtengo resultados mixtos, puede que necesite ajustes.
rybo111

No he probado la opción 1 si quieres decir eso. También solo necesitaba deshabilitar el autocompletado en un modal cargado con ajax que no se llamará con el botón Atrás. Pero si habrá otros resultados, te lo diré. @ rybo111
AlexioVay

@Vaia me refería a la opción 2: responda aquí si encuentra algún problema. Gracias.
rybo111

15

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;
}

¡El mejor enfoque que encontré hasta ahora! bueno, al menos para Chrome 64: /
scipper

Para mis propósitos esto es perfecto, ¡gracias! Chrome no se llena ni completa automáticamente, no ofrece guardarlo, y no solo está oculto a la vista sino también desde el portapapeles: copié lo que escribí y lo pegué en el bloc de notas y acabo de recibir "••• •••••••• ". ¡Brillante!
Doug McLean

15

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"

RE: 'comportamiento inesperado' Este comportamiento es impulsado por Google, quien cree que sabe mejor que los desarrolladores cómo debería funcionar cada página. A veces solo quiero una entrada de contraseña sin formato, sin lujos.
Regular Joe

3
Esta combinación FINALMENTE funcionó para mí: role = "presentation" autocomplete = "nope" probado en Chrome Versión 64.0.3282.186 (Official Build) (64-bit). ¡Qué pesadilla!
Billy Jean

2
La cadena aleatoria funciona para Chrome pero no para Firefox. Para completar, utilizo "autocomplete = 'off-no-complete'" y configuro el atributo de solo lectura con un onfocus = "this.readOnly = false". Mi aplicación es una aplicación empresarial que los usuarios usan para ingresar miles de direcciones, por lo que el caso de uso para controlar esto es real: también puedo garantizar el uso de Javascript, así que al menos lo tengo para mí
ChronoFish

13

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.


No es realmente el hecho de que diga PreventChromeAutocomplete. Pude hacer que el autocompletado funcione al decir autocomplete = "off" y name = "somename". Pero esto solo funciona si nombra dos entradas diferentes con el mismo nombre. Entonces, en su caso, PreventChromeAutocomplete debe haberse aplicado a dos entradas diferentes. Muy extraño ...
Joe Heyming

11
<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


Esta solución funciona en campos de texto
Denis Slonovschi

9

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'">

Desafortunadamente, esto se aplica a algo más que solo nombres de usuario / contraseña. Chrome mirará el texto del marcador de posición para inferir qué sugerir. Por ejemplo: jsbin.com/jacizu/2/edit
kentcdodds

Es válido que aún pueda completar los campos con sugerencias del navegador como lo demuestra su ejemplo, por lo que esto realmente no soluciona el problema de los OP. Esta solución, simplemente evita que el navegador complete "automáticamente" combinaciones de nombre de usuario y contraseñas como en el ejemplo de la respuesta principal. Esto puede ser útil para algunos, pero no es una solución final para deshabilitar el autocompletado, que tendrá que provenir de Google.
Bernesto

44
Sin embargo, si agrega un espacio delante del texto del marcador de posición, también deshabilitará la sugerencia automática basada en el marcador de posición. Definitivamente un truco, aunque no más que las otras sugerencias. jsbin.com/pujasu/1/edit
Bernesto

en realidad ... parecía funcionar para su ejemplo, pero por alguna razón no me funciona :-(
kentcdodds

¡Decir ah! Es por eso que se llama un hack ... ¿Tienes un ejemplo que puedes compartir donde no está funcionando?
Bernesto

8

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">

A partir de junio de 2016 y Chrome 51.0.2704.106 m, esta es la única solución que funciona aquí
Denis

¿Pero el formulario seleccionará el campo de entrada correcto (visible) que necesita entonces? Porque es el mismo nombre.
AlexioVay

@Vaia, agregar el atributo deshabilitado al elemento duplicado evitará que se envíe.
mccainz

8

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>

44
Dado que su respuesta es la más reciente, ¿podría agregar que agregar autocomplete="pineapple"o algún otro galimatías también parece solucionar el problema? Al menos, lo hizo por mi parte!
Douwe de Haan

1
@DouwedeHaan esto está bien hasta que se guarde el formulario, luego la función de autocompletar proporcionará recomendaciones para el campo 'piña' guardado. ¿Pero tal vez usar un hash aleatorio para el valor de autocompletar, por ejemplo, podría solucionar esto?
excavación del

@digout Estoy de acuerdo. Un buen ejemplo sería usar el UUID para este tipo de cosas. ¡Solo asegúrate de que la cadena sea única!
Douwe de Haan

7

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/


Esta es la única solución que realmente funciona. Realmente no me gusta, pero ese es el mal estado en el que estamos ahora :-(
kentcdodds

A partir de 2017, este todavía funciona bien. Solo necesita este script para forzar el inputfoco si el usuario hace clic en el marcador de posición "falso": $("label").on("click",function(){ $(this).prev().focus(); });Tenga en cuenta que labelno puede estar antes de que input... Chrome lo encuentre. Buena solución creativa! +1
Louys Patrice Bessette

7

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


1
Desafortunadamente, esto ya no funciona :-( jsbin.com/sobise/edit?html,css,output
kentcdodds

7

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.


te quiero. La única solución en esta página que realmente funciona.
Día Davis Waterbury

No funciona en el año 2020.
Kai Noack

7

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


6

Pruebe el siguiente jQuerycódigo que me ha funcionado.

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

soluciones increíbles increíbles
DKR

Simplemente puede agregar autocomplete="off"al campo de entrada en lugar de usar jquery. Y por cierto, esto no funciona. Las sugerencias de contraseña de Chrome siguen apareciendo.
Kai Noack

6

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.


La primera parte de esta respuesta ya no parece ser cierta: Chrome Bug
Joshua Drake

No estoy seguro de qué estás hablando. Ese "error" es solo un marcador de posición para que Chromium recopile los casos de uso de las personas autocomplete="off". Es posible que la intención sea eliminarlo, pero eso nunca se dice explícitamente, y ciertamente no hay nada que requiera ese salto mental. Es posible que solo quieran considerar formas alternativas o mejores de tratarlo. De todos modos, sigue siendo parte de la especificación, y de nuevo, tampoco hay indicios de que abandone la especificación. Y, hasta donde yo sé, todavía funciona en todos los navegadores, incluido Chrome.
Chris Pratt

Tenemos un par de casos en los que Chrome no respeta autocompletar = "off".
Joshua Drake

1. Un par de casos anecdóticos no equivalen a evidencia. 2. Como dije en mi respuesta, es posible que las extensiones de relleno de formularios y similares no respeten esto ya menudo no lo respeten. En última instancia, como todas las cosas, depende del cliente y, por lo tanto, del usuario. Todo lo que puede hacer es sugerir que no se debe rellenar automáticamente.
Chris Pratt


6

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.

ingrese la descripción de la imagen aquí

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


5

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>

5

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.


¡Gracias! Esto es lo único que funciona en Chrome 49. Los métodos anteriores se rompieron ya que Chrome parece llenar todas las entradas con type="password"ahora.
epelc

4

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

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

4

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">

extraña solución, pero de alguna manera eso es lo único que funciona para mí en Chrome 48 :)
Jacka
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.