html - prevent - Desactivación de Chrome Autofill
remove autocomplete chrome jquery (30)
He estado teniendo problemas con el comportamiento de autocompletar de Chrome en varias formas
Todos los campos en el formulario tienen nombres muy comunes y precisos, como "correo electrónico", "nombre" o "contraseña", y también tienen autocomplete="off" .
El indicador de autocompletar ha inhabilitado exitosamente el comportamiento de autocompletar, donde aparece un menú desplegable de valores a medida que comienza a escribir, pero no ha cambiado los valores con los que Chrome completa automáticamente los campos.
Este comportamiento estaría bien, excepto que Chrome está llenando las entradas incorrectamente, por ejemplo, llenando las entradas del teléfono con una dirección de correo electrónico. Los clientes se han quejado de esto, por lo que se ha verificado que está sucediendo en varios casos, y no como resultado de algún tipo 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 backend, pero esto parece una forma bastante intrépida de solucionar este problema. ¿Hay alguna etiqueta o peculiaridad que cambie el comportamiento de autocompletar que podría usarse para solucionar este problema?
A veces, incluso autocomplete=off no evitará completar las credenciales en campos incorrectos.
Una solución es deshabilitar la función de autocompletar del navegador usando el modo de solo lectura y establecer la escritura en foco:
<input type="password" readonly onfocus="this.removeAttribute(''readonly'');"/>
El evento de focus se produce con los clics del ratón y la tabulación de los campos.
Actualizar:
Mobile Safari coloca 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 rellena automáticamente las credenciales en el campo de texto incorrecto?
completar las entradas incorrectamente, por ejemplo, rellenar las entradas del teléfono con una dirección de correo electrónico
A veces me doy cuenta de este extraño comportamiento en Chrome y Safari, cuando hay campos de contraseña en el mismo formulario. Supongo que el navegador busca un campo de contraseña para insertar sus credenciales guardadas. Luego rellena automáticamente el nombre de usuario en el campo de entrada de texto más cercano, que aparece antes del campo de contraseña en DOM (solo adivinando debido a la observación). Como el navegador es la última instancia y no puedes controlarlo,
Esta solución de solo lectura anterior funcionó para mí.
Acabo de descubrir que si tiene un nombre de usuario y una 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=password . No importa cómo se llama el campo, solo asume el campo antes de que la contraseña sea su nombre de usuario.
Antigua solucion
Simplemente use <form autocomplete="off"> e impide el llenado de la contraseña, así como cualquier tipo de relleno heurístico de campos basados en suposiciones que un navegador puede hacer (que a menudo son incorrectas). A diferencia de usar <input autocomplete="off"> que parece ser bastante ignorado por la contraseña autocompletar (en Chrome, es decir, 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 cree un par de campos y ocúltelos 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 pon tus verdaderos campos debajo.
¡Recuerde agregar el comentario u otras personas de su equipo se preguntarán qué está haciendo!
Actualización marzo 2016
Acabo de probar con el último Chrome - todo bien. Esta es una respuesta bastante antigua ahora, pero solo quiero mencionar que nuestro equipo lo 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 se display:none significa que no se enfocan. Como mencioné, necesitas ponerlos antes de tus campos reales.
Si está utilizando javascript para modificar su formulario, hay un truco adicional que necesitará. Muestre los campos falsos mientras manipula el formulario y luego ocúltelos de nuevo un milisegundo más tarde.
Código de ejemplo usando jQuery (asumiendo que le das una clase a tus campos falsos):
$(".fake-autofill-fields").show();
// some DOM manipulation/ajax here
window.setTimeout(function () {
$(".fake-autofill-fields").hide();
},1);
Actualización julio 2018
Mi solución ya no funciona tan bien ya que los expertos en anti-usabilidad de Chrome han estado trabajando duro. Pero nos han tirado un hueso en forma de:
<input type="password" name="whatever" autocomplete="new-password" />
Esto funciona y en su mayoría resuelve el problema.
Sin embargo, no funciona cuando no tiene un campo de contraseña, solo una dirección de correo electrónico. También puede ser difícil hacer que deje de volverse amarillo y rellenar previamente. La solución de campos falsos se puede utilizar para solucionar este problema.
De hecho, a veces es necesario colocar dos lotes de campos falsos y probarlos en diferentes lugares. Por ejemplo, ya tenía campos falsos al principio de mi formulario, pero Chrome recientemente comenzó a rellenar de nuevo el campo "Correo electrónico", por lo que luego me doblé y puse más campos falsos justo antes del campo "Correo electrónico", y eso lo arregló . Al eliminar el primer o el segundo lote de los campos, se vuelve a un autocompletado demasiado entusiasta.
Aquí están mis soluciones propuestas, ya que Google insiste en anular todas las soluciones que las personas parecen hacer.
Opción 1 - seleccionar todo el texto al hacer clic
Establezca los valores de las entradas en un ejemplo para su usuario (p. [email protected] ., [email protected] ), o la etiqueta del campo (p. Ej., Email ) y agregue una clase llamada focus-select a 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á la jQuery:
$(document).on(''click'', ''.focus-select'', function(){
$(this).select();
});
Realmente no puedo ver a Chrome jugando con los valores. Eso sería una locura. Así que espero que esta sea una solución segura.
Opción 2: establezca el valor del correo electrónico en un espacio y luego elimínelo
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 la contraseña en blanco.
Si el usuario no tiene JavaScript por alguna razón, asegúrese de recortar el lado del servidor de entrada (probablemente debería estarlo de todos modos), en caso de que no elimine el espacio.
Aquí está la jQuery:
$(document).ready(function() {
setTimeout(function(){
$(''[autocomplete=off]'').val('''');
}, 15);
});
Establecí un tiempo de espera en 15 porque 5 parecí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 deja la entrada en amarillo, como si la hubiera completado 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úrate de mantener la nota HTML para que tus otros desarrolladores no la eliminen! También asegúrese de que el nombre de la entrada oculta sea relevante.
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 de que Chrome haya decidido que sabe mejor que el desarrollador cuándo debe autocompletar. Tiene un verdadero sentimiento de Microsoft.
Después de meses y meses de lucha, he encontrado que la solución es mucho más simple de lo que podrías imaginar:
En lugar de autocomplete="off" use autocomplete="false" ;)
¡Tan simple como eso, y también funciona como un encanto en Google Chrome!
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 el no autocompletado es asignar una cadena aleatoria al atributo , por ejemplo:
autocomplete="nope"
Es tan simple y complicado :)
Google Chrome básicamente busca cada primer elemento de contraseña visible dentro de las etiquetas <form> , <body> y <iframe> para habilitar la recarga automática para ellos, por lo que para deshabilitar esto, debe agregar un elemento de contraseña ficticio como lo siguiente:
Si su elemento de contraseña está dentro de una etiqueta
<form>, debe colocar el elemento ficticio como primer elemento en su formulario inmediatamente después de la etiqueta abierta<form>si su elemento de contraseña no está dentro de una etiqueta
<form>coloque el elemento ficticio como primer elemento en su página html inmediatamente después de abrir la etiqueta<body>
Debe ocultar el elemento ficticio sin usar la
display:nonecssdisplay:noneasí que básicamente utilice lo siguiente como un elemento de contraseña ficticio.<input type="password" style="width: 0;height: 0; visibility: hidden;position:absolute;left:0;top:0;"/>
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 base a eso (en particular, las entradas de tipo de contraseña nunca se recuerdan de esta manera, por razones bastante obvias). Puedes agregar autocomplete="off" para evitar que esto ocurra en cosas como tu campo de correo electrónico.
Sin embargo, entonces tienes 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 toma su propia decisión de guardar esta información para que se complete automáticamente más tarde, y está completamente fuera del alcance y esfera de influencia de su aplicación.
La solución proporcionada por Mike Nelsons no me funcionó en Chrome 50.0.2661.102 m. Simplemente agregando un elemento de entrada del mismo tipo con pantalla: ninguno establecido ya no desactiva el autocompletado del navegador nativo. Ahora es necesario duplicar el atributo de nombre del campo de entrada en el que desea desactivar la función de autocompletar.
Además, para evitar que el campo de entrada se duplique 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 de formulario.
<input name="dpart" disabled="disabled" type="password" style="display:none;">
<input name="dpart" type="password">
<input type="submit">
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 = "new-password" desactiva el autocompletar. Funcionó en la última versión del cromo 49.0.2623.112 .
Para las combinaciones de nombre de usuario y contraseña, 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 rompa este proceso invalidando esto:
<input type="text">
<input type="text" onfocus="this.type=''password''">
Para las nuevas versiones de Chrome, solo puedes poner autocomplete="new-password" en tu campo de contraseña y eso es todo. Lo he comprobado, funciona bien.
Recibí el consejo del desarrollador de Chrome en esta discusión: https://bugs.chromium.org/p/chromium/issues/detail?id=370363#c7
PS no olvide usar nombres únicos para diferentes campos para evitar el autocompletado.
Para mi simple
<form autocomplete="off" role="presentation">
Lo hizo.
Probado en múltiples versiones, el último intento fue el 56.0.2924.87
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 encima del campo de password .
Probé tanto los métodos como
<form autocomplete="off"> y <input autocomplete="off"> pero ninguno de ellos funcionó para mí.
Así que lo arreglé utilizando el fragmento de código que aparece a continuación: solo 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.
Si está implementando una función de cuadro de búsqueda, intente configurar el atributo de type para search siguiente manera:
<input type="search" autocomplete="off" />
Esto está funcionando para mí en Chrome v48 y parece ser un marcado legítimo:
Si tiene problemas para mantener los marcadores de posición pero deshabilitar 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 aún genera el problema de autocompletar, pero si usa el required="required" y algunos 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;
}
Use css text-security: disc 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;
}
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 dejar de completar automáticamente, esto funcionará. Haga que los campos sean de solo lectura y al enfocar 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 haya completado su propia entrada de usuario y agachado la autocompletar para hacerse cargo
Aquí hay un truco sucio ...
Tienes tu elemento aquí (añadiendo el atributo deshabilitado):
<input type="text" name="test" id="test" disabled="disabled" />
Y luego en la parte inferior de su página web ponga algo de JavaScript:
<script>
setTimeout(function(){
document.getElementById(''test'').removeAttribute("disabled");
},100);
</script>
La única forma en que funciona para mí fue: (jQuery requerido)
$(document).ready(function(e) {
if ($.browser.webkit) {
$(''#input_id'').val('' '').val('''');
}
});
Los valores ingresados previamente almacenados en la memoria caché por Chrome se muestran como una lista de selección desplegable. Esto se puede desactivar con autocompletar = desactivado, la dirección guardada explícitamente en la configuración avanzada de Chrome se abre automáticamente cuando se enfoca un campo de dirección. .Pero permitirá que Chrome muestre los valores almacenados en caché en el menú desplegable.
En un campo html de entrada, los siguientes apagarán ambos.
Role="presentation" & autocomplete="off"
Al seleccionar los campos de entrada para el autocompletado de direcciones, Chrome ignora los campos de entrada que no tienen el elemento HTML de etiqueta anterior.
Para asegurarse de que el analizador de Chrome ignora un campo de entrada para la ventana emergente de relleno automático, se puede agregar un botón oculto o un 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 par 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 utilizar para romper la secuencia de análisis de Chrome.
intente con un espacio en blanco en el valor:
<input type="email" name="email" value=" ">
<input type="password" name="password" value=" ">
cromo 54.0.2840.59
Bueno, ya que todos tenemos este problema, invirtí algo de tiempo para escribir una extensión jQuery para este problema. Google tiene que seguir el marcado html, no seguimos 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);
Solo agregue esto a un archivo como /js/jquery.extends.js e inclúyalo más allá de jQuery. Aplíquelo a cada elemento del formulario en la carga del documento de esta manera:
$(function() {
$(''form'').autoCompleteFix();
});
Diferentes soluciones, basadas en webkit. Como ya se mencionó, en cualquier momento que Chrome encuentre un campo de contraseña, completará automáticamente el correo electrónico. AFAIK, esto es independientemente de autocompletar = [lo que sea].
Para evitar esto, cambie el tipo de entrada a texto y aplique la fuente de seguridad de webkit 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 el tipo de entrada = contraseña, es copiar y pegar de forma segura. Sin embargo, es vulnerable al eliminar el estilo que eliminará los asteriscos; por supuesto, el tipo de entrada = contraseña se puede cambiar fácilmente al tipo de entrada = texto en la consola para revelar las contraseñas autocompletadas, por lo que realmente es lo mismo.
En lugar de las respuestas de "esto es lo que funcionó para mí" y otras respuestas que parecen hacks completos ... Así es como Chrome (y la última especificación) manejará los autocompleteatributos de tus inputelementos:
https://developers.google.com/web/fundamentals/design-and-ui/input/forms/label-and-name-inputs?hl=en
TLDR: agregue autocomplete=''<value>''en sus entradas, donde <value>debería haber cualquier cadena que defina para qué es el campo. Esto funciona de manera similar al nameatributo. Utilice los valores sugeridos en el enlace de arriba siempre que sea posible.
Además, elimine el atributo autocompletar de su formulario
He enfrentado el mismo problema. Y aquí está la solución para deshabilitar el nombre de usuario y la contraseña de autocompletado 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">
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" />
<input readonly onfocus="this.removeAttribute(''readonly'');" type="text">
agregar atributo de solo lectura a la etiqueta junto con el evento onfocus eliminándolo, soluciona el problema