Chrome ignora autocompletar = "off"


445

He creado una aplicación web que utiliza un menú desplegable de tagbox. Esto funciona muy bien en todos los navegadores, excepto el navegador Chrome (Versión 21.0.1180.89).

A pesar de que tanto los inputcampos Y el formcampo que tiene el autocomplete="off"atributo, Chrome insiste en mostrar un historial desplegable de entradas anteriores para el campo, que está borrando la lista de etiquetas.


10
Técnicamente, esta pregunta se hizo unos 5 meses antes de la referenciada como "Esta pregunta ya tiene una respuesta aquí". Ese es el duplicado como vino después de este.
user3071434

Respuestas:


318

ACTUALIZAR

Parece que ahora Chrome ignora los atributos style="display: none;"o style="visibility: hidden;.

Puedes cambiarlo a algo como:

<input style="opacity: 0;position: absolute;">
<input type="password" style="opacity: 0;position: absolute;">

En mi experiencia, Chrome solo completa automáticamente el primero <input type="password">y el anterior <input>. Entonces agregué:

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

En la parte superior de la <form>y el caso fue resuelto.


54
esto ya no funciona Chrome 40 no funciona esta solución
user881703

8
Esto no solo es feo, sino que todavía no puedo encontrar ninguna explicación a la pregunta ¿Por qué ?
Augustin Riedinger

44
Parece que Chrome ahora los ignora si se muestra: no se usa ninguno, así que moví los campos fuera de la vista con posicionamiento absoluto ...
Christoph Leiter

2
display: none;desaparecerá el elemento, nada sobre el autocompletado.
Sandun Perera el

277

Evite el autocompletado de 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 ( podría no funcionar ):

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

Explicación:

autocompletetodavía funciona en un <input>pese a tener autocomplete="off", pero puede cambiar offa una cadena aleatoria, como nope.


Otras "soluciones" para deshabilitar el autocompletado de un campo (no es la forma correcta de hacerlo, pero funciona):

1)

HTML:

<input type="password" id="some_id" autocomplete="new-password">

JS (carga):

(function() {
    var some_id = document.getElementById('some_id');
    some_id.type = 'text';
    some_id.removeAttribute('autocomplete');
})();

o usando jQuery:

$(document).ready(function() {
    var some_id = $('#some_id');
    some_id.prop('type', 'text');
    some_id.removeAttr('autocomplete');
});

2)

HTML:

<form id="form"></form>

JS (carga):

(function() {
    var input = document.createElement('INPUT');
    input.type = 'text';
    document.getElementById('form').appendChild(input);
})();

o usando jQuery:

$(document).ready(function() {
    $('<input>', {
        type: 'text'
    }).appendTo($('#form'));
});

Para agregar más de un campo usando jQuery:

function addField(label) {
  var div = $('<div>');
  var input = $('<input>', {
    type: 'text'
  });
  
  if(label) {
    var label = $('<label>', {
      text: label
    });
    
    label.append(input);
    div.append(label);    
  } else {
    div.append(input);    
  }  
  
  div.appendTo($('#form'));
}

$(document).ready(function() {
  addField();
  addField('Field 1: ');  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form"></form>


Trabaja en:

  • Chrome: 49+

  • Firefox: 44+


Theres ningún código, sólo cómo su respuesta en realidad prevenir autocompletar si autocomplete = "" se supone que acaba de aceptar un valor lógico
Tallboy

autocomplete = "nueva contraseña" cuando se asigna al campo de contraseña, funcionó para mí en Chrome. autocomplete = "off" en el formulario no lo hizo.
Second2None

2
Lo más importante (y lo único que funcionó para mí) fue asegurarse absolutamente de que su propiedad ID y Nombre de su campo <input> no contuviera "Nombre de usuario" o "Contraseña". Esto efectivamente detuvo todo el autocompletado para mí en autocomplete = "off".
GONeale

new-passwordes una buena captura para cualquier entrada oculta que en realidad no es una contraseña, gracias
antongorodezkiy

Lol autocomplete="nope"realmente funcionó para mí, a menos que lo agregue a mis dos campos de formulario. Al igual que puedo tenerlo en cualquier campo y luego ese campo no se completará automáticamente, pero el otro campo todavía se completará automáticamente, pero tan pronto como lo coloque en ambos campos, ambos comenzarán a completarse nuevamente.
PrintlnParams

147

Parece que Chrome ahora ignora a autocomplete="off"menos que esté en la <form autocomplete="off">etiqueta.


Para React, use 'autoComplete = off'.
zero_cool

Para obtener una explicación de por qué Chrome realizó este cambio, consulte esta respuesta: stackoverflow.com/a/39689037/1766230 : dan prioridad a los usuarios sobre los desarrolladores.
Lucas

13
Si desea proporcionar al equipo de Chrome motivos válidos para usar autocomplete = "off", hágalo aquí: bugs.chromium.org/p/chromium/issues/detail?id=587466
Chris

@Digggid Chrome 71 no ignora el atributo, pero en algunos casos ignora el valor "desactivado". Usar un valor como "país" todavía funciona para mí.
Burak

1
Solo una aclaración sobre lo anterior ya que hay informes contradictorios. En la etiqueta del formulario, agregue autocomplete = "off" y en las etiquetas de entrada individuales agregue autocomplete = "new-password". Trabajando a partir de Chrome 75
AndyP9

83

Enfoque moderno

Simplemente haga su entrada readonlyy, en foco, retírela. Este es un enfoque muy simple y los navegadores no llenarán readonlyentradas. Por lo tanto, este método es aceptado y nunca será sobrescrito por futuras actualizaciones del navegador.

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

La siguiente parte es opcional. Diseñe su entrada en consecuencia para que no se vea como una readonlyentrada.

input[readonly] {
     cursor: text;
     background-color: #fff;
}

EJEMPLO DE TRABAJO


50
@Basit - Y por eso lo llamé a modern approach. Menos del 1% de los usuarios en el mundo tienen Javascript desactivado. Honestamente, no vale la pena que alguien se acomode a una audiencia tan pequeña cuando la gran mayoría de los sitios web dependen de Javascript. He estado desarrollando sitios web durante mucho tiempo y el 100% de mis sitios usan Javascript y dependen en gran medida de él. Si los usuarios tienen Javascript desactivado, ese es su propio problema y elección, no el mío. No podrán visitar o usar al menos el 90% de los sitios web en línea con él desactivado ... Su voto negativo es completamente irrelevante.
Fizzix

19
Esto no funciona hoy en 49. Los "desarrolladores" de Chrome están observando las soluciones stackoverflow y eliminándolas.
puchu

77
Esta respuesta de septiembre de 2015 es básicamente una copia de la respuesta de noviembre de 2014 a continuación.
dsuess

55
2019 - no funciona.
user2060451

1
Esto rompería los lectores de pantalla
Greg

80

Para una solución alternativa confiable, puede agregar este código a su página de diseño:

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

Chrome respeta autocompletar = desactivado solo cuando hay al menos otro elemento de entrada en el formulario con cualquier otro valor de autocompletar.

Esto no funcionará con los campos de contraseña, que se manejan de manera muy diferente en Chrome. Consulte https://code.google.com/p/chromium/issues/detail?id=468153 para obtener más detalles.

ACTUALIZACIÓN: El equipo de Chromium cerró el error como "No se solucionará" el 11 de marzo de 2016. Vea el último comentario en mi informe de error presentado originalmente , para obtener una explicación completa. TL; DR: utilice atributos semánticos de autocompletado como autocomplete = "new-street-address" para evitar que Chrome realice el autocompletado.


2
@Jonathan Cowley-Thom: prueba estas páginas de prueba que publiqué con mi solución alternativa. En hub.securevideo.com/Support/AutocompleteOn , debería ver las sugerencias de autocompletado de Chrome. Luego, intente las mismas entradas en hub.securevideo.com/Support/AutocompleteOff . No debería ver las sugerencias de autocompletado de Chrome. Acabo de probar esto en Chrome 45.0.2454.101m y 46.0.2490.71m, y funcionó como se esperaba en ambos.
JT Taylor

Una actualización más sobre este asunto: acabo de recibir una notificación del equipo de Chrome de que esto se ha solucionado. Por lo tanto, ¡espero que esta solución temporal ya no sea necesaria!
JT Taylor

Consulte mi publicación anterior: "Esto no funcionará con los campos de contraseña: estos se manejan de manera muy diferente en Chrome. Consulte code.google.com/p/chromium/issues/detail?id=468153 para obtener más detalles".
JT Taylor

46

Bueno, un poco tarde para la fiesta, pero parece que hay un pequeño malentendido sobre cómo autocompletedebería y no debería funcionar. De acuerdo con las especificaciones HTML, el agente de usuario (en este caso Chrome) puede anular autocomplete:

https://www.w3.org/TR/html5/forms.html#autofilling-form-controls:-the-autocomplete-attribute

Un agente de usuario puede permitirle anular el nombre del campo de autocompletar de un elemento, por ejemplo, cambiarlo de "desactivado" a "activado" para permitir que los valores se recuerden y se completen previamente a pesar de las objeciones del autor de la página, o siempre "desactivado", sin recordar nunca valores. Sin embargo, los agentes de usuario no deben permitir que los usuarios anulen trivialmente el nombre del campo de autocompletar de "desactivado" a "activado" u otros valores, ya que existen implicaciones de seguridad significativas para el usuario si todos los valores se recuerdan siempre, independientemente de las preferencias del sitio.

Entonces, en el caso de Chrome, los desarrolladores esencialmente han dicho "dejaremos esto al usuario para que decida en sus preferencias si quiere autocompletetrabajar o no. Si no lo quiere, no lo habilite en su navegador" .

Sin embargo, parece que esto es un poco entusiasta de su parte para mi gusto, pero es así. La especificación también analiza las posibles implicaciones de seguridad de tal movimiento:

La palabra clave "off" indica que los datos de entrada del control son particularmente sensibles (por ejemplo, el código de activación para un arma nuclear); o que es un valor que nunca se reutilizará (por ejemplo, una clave única para un inicio de sesión bancario) y, por lo tanto, el usuario tendrá que ingresar explícitamente los datos cada vez, en lugar de poder confiar en el UA para completar previamente el valor para él; o que el documento proporciona su propio mecanismo de autocompletado y no desea que el agente de usuario proporcione valores de autocompletado.

Entonces, después de experimentar la misma frustración que todos los demás, encontré una solución que funciona para mí. Es similar en vena a las autocomplete="false"respuestas.

Un artículo de Mozilla habla exactamente de este problema:

https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

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

Entonces, el siguiente código debería funcionar:

autocomplete="nope"

Y así debería cada uno de los siguientes:

autocomplete="false"
autocomplete="foo"
autocomplete="bar"

El problema que veo es que el agente del navegador puede ser lo suficientemente inteligente como para aprender el autocompleteatributo y aplicarlo la próxima vez que vea el formulario. Si lo hace, la única forma en que puedo ver para solucionar el problema sería cambiar dinámicamente el autocompletevalor del atributo cuando se genera la página.

Un punto que vale la pena mencionar es que muchos navegadores ignorarán la autocompleteconfiguración de los campos de inicio de sesión (nombre de usuario y contraseña). Como dice el artículo de Mozilla:

Por esta razón, muchos navegadores modernos no admiten autocompletar = "off" para los campos de inicio de sesión.

  • Si un sitio establece autocomplete = "off" para un formulario, y el formulario incluye campos de ingreso de nombre de usuario y contraseña, entonces el navegador aún ofrecerá recordar este inicio de sesión, y si el usuario está de acuerdo, el navegador completará automáticamente esos campos la próxima vez que el El usuario visita esta página.
  • Si un sitio establece autocomplete = "off" para los campos de ingreso de nombre de usuario y contraseña, entonces el navegador aún ofrecerá recordar este inicio de sesión, y si el usuario está de acuerdo, el navegador completará automáticamente esos campos la próxima vez que visite esta página.

Este es el comportamiento en Firefox (desde la versión 38), Google Chrome (desde la 34) e Internet Explorer (desde la versión 11).

Finalmente, una pequeña información sobre si el atributo pertenece al formelemento o al inputelemento. La especificación nuevamente tiene la respuesta:

Si se omite el atributo de autocompletar, en su lugar se usa el valor predeterminado correspondiente al estado del atributo de autocompletar del propietario del formulario del elemento ("activado" o "desactivado"). Si no hay un propietario del formulario, se usa el valor "on".

Entonces. Ponerlo en el formulario debe aplicarse a todos los campos de entrada. Ponerlo en un elemento individual debe aplicarse solo a ese elemento (incluso si no hay uno en el formulario). Si autocompleteno está configurado en absoluto, su valor predeterminado es on.

Resumen

Para deshabilitar autocompleteen todo el formulario:

<form autocomplete="off" ...>

O si necesita hacerlo dinámicamente:

<form autocomplete="random-string" ...>

Para deshabilitar autocompleteen un elemento individual (independientemente de que la configuración del formulario esté presente o no)

<input autocomplete="off" ...>

O si necesita hacerlo dinámicamente:

<input autocomplete="random-string" ...>

Y recuerde que ciertos agentes de usuario pueden anular incluso sus intentos más difíciles de deshabilitar autocomplete.


1
2019 - no funciona. Versión 76.0
user2060451

1
@ user2060451: ¿qué no funciona? Lo acabo de probar en 76.0.3809.87 en Windows y Mac. - Ambos realizan según la especificación. como se describió anteriormente. Si pudiera proporcionar un poco más de descripción que "no funciona", podría ayudarlo.
Hooligancat

1
Solo traté de dar (desde la consola después de todo lo cargado y al configurarlo en el lado del servidor) una cadena aleatoria para autocompletar el elemento de entrada, no funcionó. Dar autocompletar = "off" al elemento del formulario tampoco funcionó.
Nuryagdy Mustapayev


29

Chrome versión 34 ahora ignora el autocomplete=off, mira esto .

¿Mucha discusión sobre si esto es algo bueno o malo? ¿Cuál es tu opinión?


77
perdón por el voto negativo ... este no es un sitio de discusión (prueba quora en su lugar), y no proporcionas una respuesta. Gracias por el enlace sin embargo.
commonpike

25

El navegador no se preocupa por autocompletar = apagado automático o incluso llena las credenciales en el campo de texto incorrecto?

Lo arreglé configurando el campo de contraseña en solo lectura y actívelo cuando el usuario hace clic en él o usa la tecla de tabulación para este campo.

arregle el autocompletado del navegador: solo lectura y establezca escritura en el foco (al hacer clic con el mouse y al pasar por los campos)

 <input type="password" readonly  
     onfocus="$(this).removeAttr('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();  }" />

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

// UpdateEnd

Por cierto, más información sobre mi observación:

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, a veces incluso autocompletar = apagado no evitaría completar las credenciales en campos incorrectos, pero no el campo de usuario o apodo.


2
en lugar de usar onfocus, uso un setTimeout para borrar la lectura solamente, para que mis usuarios no vean que la entrada es de solo lectura y nunca la enfocan.
Hippyjim

23

Puedes usar autocomplete="new-password"

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

Trabaja en:

  • Cromo: 53, 54, 55
  • Firefox: 48, 49, 50

Esto no puede funcionar, porque la cadena de autocompletar es fija. Los navegadores recordarán la nueva contraseña para la próxima vez.
paso

23

TL; DR: dígale a Chrome que esta es una nueva entrada de contraseña y que no proporcionará las antiguas como sugerencias de autocompletar:

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

autocomplete="off" no funciona debido a una decisión de diseño: mucha investigación muestra que los usuarios tienen contraseñas mucho más largas y difíciles si pueden almacenarlas en un navegador o administrador de contraseñas.

La especificación de autocomplete ha cambiado y ahora admite varios valores para que los formularios de inicio de sesión sean fáciles de completar automáticamente:

<!-- Auto fills with the username for the site, even though it's email format -->
<input type="email" name="email" autocomplete="username">

<!-- current-password will populate for the matched username input  -->
<input type="password" autocomplete="current-password" />

Si no proporciona estos, Chrome aún intenta adivinar, y cuando lo hace, lo ignora autocomplete="off".

La solución es que autocompletetambién existen valores para los formularios de restablecimiento de contraseña:

<label>Enter your old password:
    <input type="password" autocomplete="current-password" name="pass-old" />
</label>
<label>Enter your new password:
    <input type="password" autocomplete="new-password" name="pass-new" />
</label>
<label>Please repeat it to be sure:
    <input type="password" autocomplete="new-password" name="pass-repeat" />
</label>

Puede usar esta autocomplete="new-password"bandera para decirle a Chrome que no adivine la contraseña, incluso si tiene una almacenada para este sitio.

Chrome también puede administrar contraseñas para sitios directamente usando la API de credenciales , que es un estándar y que eventualmente tendrá soporte universal.


55
No es una razón realmente convincente. El hecho de que el usuario quiera algo no significa que sea una idea inteligente. Eso es casi tan malo como decir que permitirá contraseñas de un solo carácter en su aplicación porque el usuario lo encuentra más conveniente. A veces, la seguridad triunfa sobre la conveniencia ...
Daniel Kotin

Tengo un campo llamado "ContactNoAlt" que Chrome insiste en llenar con una dirección de correo electrónico. Se prefiere activar / desactivar el autocompletado, pero se necesita una solución práctica en un nivel práctico porque Chrome es falible. Más específicamente, autocomplete = "off" es un estándar, entonces, ¿qué hace que los desarrolladores de Chrome sean tan buenos que sienten que pueden ignorar los estándares? Tal vez algún día Chrome decida que otra pieza de HTML es inconveniente ... (esto está comenzando sentirse como IE5 / 6 de-ja-vu)
dunxz

Soy un usuario de Chrome y no quiero este comportamiento. Ni siquiera me preguntó antes de rellenar automáticamente el cuadro de contraseña que aparecía para asegurarme de que solo yo pudiera acceder a la aplicación web en cuestión. Guardar algunas contraseñas no debería significar completar automáticamente todas las contraseñas.
Hippyjim

3
Esta respuesta (y el comportamiento de Google) ignora el hecho de que una de las principales razones por las que puede querer hacer esto es implementar sus propios comportamientos de autocompletado (por ejemplo, lista de la base de datos).
squarelogic.hayden

Estás intentando defender una decisión claramente mala hecha por Chrome. Estoy implementando la política de la compañía que no puedo cambiar. Así que ahora tengo que insertar hacks para Chrome. Actualmente trabajan. Si dejan de funcionar, nuestra empresa cambiará el navegador predeterminado para los empleados. Así que ahora tenemos el mismo comportamiento pero con hacks y posiblemente páginas rotas en futuras actualizaciones. Y viendo todas estas respuestas aquí, hay muchos desarrolladores que usan estos hacks. Bien hecho cromo.
Claudiu Creanga

23

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.


12

Autocomplete="Off" ya no funciona

Intente usar solo una cadena aleatoria en lugar de "Off", por ejemploAutocomplete="NoAutocomplete"

Espero que ayude.


55
No funciona en Chrome 73
just_user

10

Visto que Chrome ignora autocomplete="off", lo resuelvo de una manera estúpida que está usando "entrada falsa" para engañar a Chrome para llenarlo en lugar de llenar el "real".

Ejemplo:

<input type="text" name="username" style="display:none" value="fake input" /> 
<input type="text" name="username" value="real input"/>

Chrome completará la "entrada falsa" y, cuando se envíe, el servidor tomará el valor de "entrada real".


10

Estoy publicando esta respuesta para traer una solución actualizada a este problema. Actualmente estoy usando Chrome 49 y ninguna respuesta dada funciona para este. También estoy buscando una solución que funcione con otros navegadores y versiones anteriores.

Pon este código al comienzo de tu formulario

<div style="display: none;">
    <input type="text" autocomplete="new-password">
    <input type="password" autocomplete="new-password">
</div>

Luego, para su campo de contraseña real, use

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

Comente esta respuesta si ya no funciona o si tiene un problema con otro navegador o versión.

Aprobado en:

  • Chrome: 49
  • Firefox: 44, 45
  • Borde: 25
  • Internet Explorer: 11

1
Desafortunadamente, Chrome versión 49.0.2623.87 y no funciona para TextBox, todavía veo aparecer el autocompletado.
eYe

8

para cualquiera que busque una solución a esto, finalmente lo descubro.

Chrome solo obedece el autocomplete = "off" si la página es HTML5 (estaba usando XHTML).

Convertí mi página a HTML5 y el problema desapareció (facepalm).


6

Cambie el atributo de tipo de entrada a type="search".

Google no aplica el autocompletado a las entradas con un tipo de búsqueda.


1
Voy a downvote: probado en el cromo 60: Esto no impide que autocompletar ..
boly38

6

Hasta esta semana, las dos soluciones siguientes parecían funcionar para Chrome, IE y Firefox. Pero con el lanzamiento de Chrome versión 48 (y todavía en 49), ya no funcionan:

  1. Lo siguiente en la parte superior del formulario:
<input style="display:none" type="text" name="fakeUsername"/>
<input style="display:none" type="password" name="fakePassword"/>
  1. Lo siguiente en el elemento de entrada de contraseña:

    autocompletar = "apagado"

Entonces, para solucionar esto rápidamente, al principio traté de usar un truco importante de configurar inicialmente el elemento de entrada de contraseña en deshabilitado y luego usé setTimeout en la función de documento listo para habilitarlo nuevamente.

setTimeout(function(){$('#PasswordData').prop('disabled', false);}, 50);

Pero esto parecía tan loco e hice un poco más de búsqueda y encontré la respuesta de @tibalts en Desactivar el Autocompletado de Chrome . Su respuesta es usar autocomplete = "new-password" en la entrada de contraseñas y esto parece funcionar en todos los navegadores (he mantenido mi solución número 1 arriba en esta etapa).

Aquí está el enlace en la discusión del desarrollador de Google Chrome: https://code.google.com/p/chromium/issues/detail?id=370363#c7


@JorgeSampayo Solo funciona en entradas de contraseña pero no en entradas de texto.
eYe

6

autocomplete=off se ignora en gran medida en los navegadores modernos, principalmente debido a los administradores de contraseñas, etc.

Puede intentar agregar esto autocomplete="new-password", no es totalmente compatible con todos los navegadores, pero funciona en algunos


6

autocomplete="off"Por lo general funciona, pero no siempre. Depende namedel campo de entrada. Los nombres como "dirección", "correo electrónico", "nombre" se completarán automáticamente (los navegadores creen que ayudan a los usuarios), cuando campos como "código", "pin" no se completarán automáticamente (si autocomplete="off"está configurado)

Mi problema fue que el autocompletado estaba jugando con el asistente de direcciones de Google

Lo arreglé renombrándolo

desde

<input type="text" name="address" autocomplete="off">

a

<input type="text" name="the_address" autocomplete="off">

Probado en cromo 71.


1
Creo que esta es la última forma de eliminar el autocompletado. trabajando en 2020 mayo en Chrome 81
NIKHIL CM


5

No tengo idea de por qué esto funcionó en mi caso, pero en Chrome utilicé autocomplete="none"y Chrome dejó de sugerir direcciones para mi campo de texto.


4

A partir de Chrome 42, ninguna de las soluciones / hacks en este hilo (a partir de 2015-05-21T12:50:23+00:00) funciona para deshabilitar el autocompletado para un campo individual o el formulario completo.

EDITAR: descubrí que en realidad solo necesita insertar un campo de correo electrónico ficticio en su formulario (puede ocultarlo display: none) antes de los otros campos para evitar el autocompletado. Supongo que Chrome almacena algún tipo de firma de formulario con cada campo autocompletado e incluir otro campo de correo electrónico corrompe esta firma y evita el autocompletado.

<form action="/login" method="post">
    <input type="email" name="fake_email" style="display:none" aria-hidden="true">
    <input type="email" name="email">
    <input type="password" name="password">
    <input type="submit">
</form>

La buena noticia es que, dado que la "firma del formulario" está dañada por esto, ninguno de los campos se completa automáticamente, por lo que no se necesita JS para borrar los campos falsos antes del envío.

Vieja respuesta:

Lo único que he encontrado que sigue siendo viable es insertar dos campos ficticios de tipo correo electrónico y contraseña antes de los campos reales. Puede configurarlos display: nonepara ocultarlos (no es lo suficientemente inteligente como para ignorar esos campos):

<form action="/login" method="post">
    <input type="email" name="fake_email" style="display:none" aria-hidden="true">
    <input type="password" name="fake_password" style="display:none" aria-hidden="true">
    <input type="email" name="email">
    <input type="password" name="password">
    <input type="submit">
</form>

Desafortunadamente, los campos deben estar dentro de su formulario (de lo contrario, ambos conjuntos de entradas se rellenan automáticamente). Por lo tanto, para que los campos falsos se ignoren realmente, necesitará algunos JS para ejecutar en el envío del formulario para borrarlos:

form.addEventListener('submit', function() {
    form.elements['fake_email'].value = '';
    form.elements['fake_password'].value = '';
});

Observe desde arriba que borrar el valor con Javascript funciona para anular el autocompletado. Entonces, si es aceptable perder el comportamiento adecuado con JS deshabilitado, puede simplificar todo esto con un "polyfill" de JS autocompletado para Chrome:

(function(document) {

    function polyfillAutocomplete(nodes) {

        for(var i = 0, length = nodes.length; i < length; i++) {

            if(nodes[i].getAttribute('autocomplete') === 'off') {

                nodes[i].value = '';
            }
        }
    }

    setTimeout(function() {

        polyfillAutocomplete(document.getElementsByTagName('input'));
        polyfillAutocomplete(document.getElementsByTagName('textarea'));

    }, 1);

})(window.document);

4

Tuve un problema similar en el que el campo de entrada tomó un nombre o un correo electrónico. Configuré autocomplete = "off" pero Chrome aún forzó sugerencias. Resulta que fue porque el texto del marcador de posición tenía las palabras "nombre" y "correo electrónico".

Por ejemplo

<input type="text" placeholder="name or email" autocomplete="off" />

Lo evité poniendo un espacio de ancho cero en las palabras en el marcador de posición. No más Chrome autocompletar.

<input type="text" placeholder="nam&#8203;e or emai&#8203;l" autocomplete="off" />

4

En Chrome 48+ usa esta solución:

  1. Poner campos falsos antes que campos reales:

    <form autocomplete="off">
      <input name="fake_email"    class="visually-hidden" type="text">
      <input name="fake_password" class="visually-hidden" type="password">
    
      <input autocomplete="off" name="email"    type="text">
      <input autocomplete="off" name="password" type="password">
    </form>
  2. Ocultar campos falsos:

    .visually-hidden {
      margin: -1px;
      padding: 0;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      clip: rect(0, 0, 0, 0);
      position: absolute;
    }
  3. ¡Lo hiciste!

También esto funcionará para versiones anteriores.


@yivo Parece que la única diferencia entre urs y og respuesta son las etiquetas! important, así que las agregué, aún no funcionan. dropbox.com/s/24yaz6ut7ygkoql/…
Mike Purcell

@MikePurcell No tienes autocomplete="off"en la formetiqueta. También intente poner entradas falsas inmediatamente después de la formetiqueta.
yivo

@Yivo: Intenté sus sugerencias, funcionó bien para el campo de correo electrónico, sin embargo, el menú desplegable de autocompletar todavía ocurre para el campo de contraseña. dropbox.com/s/5pm5hjtx1s7eqt3/…
Mike Purcell

3

Después del Chrome v. 34, la configuración autocomplete="off"en la <form>etiqueta no funciona

Hice los cambios para evitar este comportamiento molesto:

  1. Eliminar el namey el idde la entrada de contraseña
  2. Ponga una clase en la entrada (ej .: passwordInput)

(Hasta ahora, Chrome no pondrá la contraseña guardada en la entrada, pero el formulario ahora está roto)

Finalmente, para que el formulario funcione, ponga este código en ejecución cuando el usuario haga clic en el botón de envío, o cuando desee activar el envío del formulario:

var sI = $(".passwordInput")[0];
$(sI).attr("id", "password");
$(sI).attr("name", "password");

En mi caso, solía tener id="password" name="password"la entrada de contraseña, así que las puse antes de activar la submisión.


3

Después de haber probado todas las soluciones, esto es lo que parece estar funcionando para la versión de Chrome: 45, con un formulario que tiene un campo de contraseña:

 jQuery('document').ready(function(){
        //For disabling Chrome Autocomplete
        jQuery( ":text" ).attr('autocomplete','pre'+Math.random(0,100000000));
 });

3

Acabo de actualizar a Chrome 49 y la solución de Diogo Cid ya no funciona.

Hice una solución diferente ocultando y eliminando los campos en tiempo de ejecución después de cargar la página.

Chrome ahora ignora la solución original que aplica las credenciales al primer campo mostrado type="password" y su type="text"campo anterior , por lo que he ocultado ambos campos usando CSS visibility: hidden;

<!-- HTML -->
<form>
    <!-- Fake fields -->
    <input class="chromeHack-autocomplete">
    <input type="password" class="chromeHack-autocomplete">

    <input type="text" placeholder="e-mail" autocomplete="off" />
    <input type="password" placeholder="Password" autocomplete="off" />
</form>

<!-- CSS -->
.chromeHack-autocomplete {
    height: 0px !important;
    width: 0px !important;
    opacity: 0 !important;
    padding: 0 !important; margin: 0 !important;
}

<!--JavaScript (jQuery) -->
jQuery(window).load(function() {
    $(".chromeHack-autocomplete").delay(100).hide(0, function() {
        $(this).remove();
    });
});

Sé que puede parecer no muy elegante, pero funciona.


2

Encontré que esta solución es la más adecuada:

function clearChromeAutocomplete()
{
// not possible, let's try: 
if (navigator.userAgent.toLowerCase().indexOf('chrome') >= 0) 
{
document.getElementById('adminForm').setAttribute('autocomplete', 'off'); 
setTimeout(function () {
        document.getElementById('adminForm').setAttribute('autocomplete', 'on'); 
}, 1500);
}
}

Debe cargarse después de dom ready, o después de que se procese el formulario.


2

Si bien estoy de acuerdo con que la función de autocompletar debería ser una opción del usuario, hay ocasiones en que Chrome es demasiado entusiasta (otros navegadores también pueden serlo). Por ejemplo, un campo de contraseña con un nombre diferente todavía se llena automáticamente con una contraseña guardada y el campo anterior se completa con el nombre de usuario. Esto apesta particularmente cuando el formulario es un formulario de administración de usuarios para una aplicación web y no desea que el autocompletado lo complete con sus propias credenciales.

Chrome ignora completamente autocompletar = "off" ahora. Si bien los hacks JS pueden funcionar, encontré una forma simple que funciona al momento de escribir:

Establezca el valor del campo de contraseña en el carácter de control 8 ( "\x08"en PHP o&#8; en HTML). Esto impide que Chrome complete automáticamente el campo porque tiene un valor, pero no se ingresa ningún valor real porque este es el carácter de retroceso.

Sí, esto sigue siendo un truco, pero funciona para mí. YMMV.


No parece funcionar en Chrome 40
capó el

Creo que han elegido este truco e ignoraron los caracteres de control en el valor, por lo que ahora se evalúa como vacío. Consulte la respuesta de @ ice-cream stackoverflow.com/a/16130452/752696 para obtener la solución correcta y actualizada.
spikyjt

El mismo caso de uso aquí: trabajar con la administración de usuarios y tener credenciales propias autocompletadas. Sin embargo, dado que es mi propio código y lo reutilizo formpara crear y editar usuarios nuevos, simplemente anulando los inputvalores a través de JS eliminé el autocompletado.
nuala
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.