html - remove - input type password no autocomplete
Chrome ignora autocompletar="off" (30)
He creado una aplicación web que utiliza un cuadro de etiqueta desplegable. Esto funciona muy bien en todos los navegadores excepto en el navegador Chrome (versión 21.0.1180.89).
A pesar de que tanto los campos de input Y el campo de form tienen el atributo autocomplete="off" , Chrome insiste en mostrar un historial desplegable de entradas previas para el campo, que está borrando la lista de etiquetas etiquetadas.
Enfoque moderno
Simplemente haga su entrada de readonly y, al enfocar, elimínela. Este es un enfoque muy simple y los navegadores no readonly entradas de readonly . 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 />
Diseñe su entrada en consecuencia para que no se vea como una entrada de readonly
input[readonly] {
cursor: text;
background-color: #fff;
}
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: He descubierto que en realidad solo necesita insertar un campo de correo electrónico ficticio en su formulario (puede ocultarlo con la 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, como la "firma del formulario" está dañada por esto, ninguno de los campos se completan automáticamente, por lo que no se necesita JS para borrar los campos falsos antes del envío.
Respuesta anterior:
Lo único que he encontrado todavía viable es insertar dos campos ficticios de tipo correo electrónico y contraseña antes de los campos reales. Puede configurarlos para que display: none para 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 completan automáticamente). Por lo tanto, para que los campos falsos sean realmente ignorados, necesitará algunos JS para ejecutar en el envío de formularios para eliminarlos:
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. Por lo tanto, si es aceptable perder el comportamiento correcto con JS deshabilitado, puede simplificar todo esto con un "polyfill" autocompletado de JS 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);
Acabo de actualizar a Chrome 49 y la solución de Diogo Cid ya no funciona.
Hice una solución alternativa 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 aplicando las credenciales al primer campo desplegado type="password" y su campo anterior type="text" , por lo que he ocultado ambos campos con visibility: hidden; 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 poco elegante pero funciona.
Bueno, un poco tarde para la fiesta, pero parece que hay un poco de malentendido acerca de cómo el autocomplete debería y no debería funcionar. De acuerdo con las especificaciones HTML, el agente de usuario (en este caso Chrome) puede anular el autocomplete :
https://www.w3.org/TR/html5/forms.html#autofilling-form-controls:-the-autocomplete-attribute
Un agente de usuario puede permitir que el usuario anule el nombre del campo de relleno automático de un elemento, por ejemplo, para cambiarlo de "apagado" a "encendido" para permitir que los valores se recuerden y se rellenen previamente a pesar de las objeciones del autor de la página, o que siempre estén "apagados", sin recordar valores. Sin embargo, los agentes de usuario no deben permitir que los usuarios anulen de forma trivial el nombre del campo de autocompletar de "apagado" a "encendido" u otros valores, ya que el usuario tiene implicaciones de seguridad significativas si todos los valores siempre se recuerdan, independientemente de las preferencias del sitio.
Así que en el caso de Chrome, los desarrolladores esencialmente han dicho "dejaremos esto al usuario para que decida en sus preferencias si quiere que el autocomplete funcione o no. Si no lo desea, no lo habilite en su navegador. ".
Sin embargo, parece que esto es un poco demasiado entusiasta por su parte para mi gusto, pero así es como es. 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 de una sola vez para un inicio de sesión en un banco) y, por lo tanto, el usuario tendrá que ingresar los datos explícitamente cada vez, en lugar de poder confiar en la UA para el llenado previo el valor para él; o que el documento proporciona su propio mecanismo de autocompletar y no quiere que el agente de usuario proporcione valores de autocompletado.
Entonces, después de experimentar la misma frustración que los demás, encontré una solución que funciona para mí. Es similar en vena a las respuestas autocomplete="false" .
Un artículo de Mozilla habla exactamente de este problema:
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 finalización es asignar una cadena aleatoria al atributo
Entonces el siguiente código debería funcionar:
autocomplete="nope"
Y así debe 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 atributo autocomplete y aplicarlo la próxima vez que vea el formulario. Si lo hace, la única manera que puedo ver para solucionar el problema sería cambiar dinámicamente el valor del atributo autocomplete cuando se genera la página.
Un punto que vale la pena mencionar es que muchos navegadores ignorarán las configuraciones de autocomplete para 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 autocompletar = "desactivado" 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 llenará automáticamente esos campos la próxima vez que El usuario visita esta página.
- Si un sitio establece autocompletar = "desactivado" 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 llenará automáticamente esos campos la próxima vez que el usuario visite esta página.
Este es el comportamiento en Firefox (desde la versión 38), Google Chrome (desde 34) e Internet Explorer (desde la versión 11).
Finalmente, un poco de información sobre si el atributo pertenece al elemento de form o al elemento de input . La especificación de nuevo tiene la respuesta:
Si se omite el atributo autocompletar, en su lugar se usa el valor predeterminado correspondiente al estado del atributo autocompletar del propietario del formulario del elemento (ya sea "activado" o "desactivado"). Si no hay un propietario de formulario, se utiliza el valor "on".
Asi que. 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 autocomplete no está configurado en absoluto, por defecto está activado.
Resumen
Para deshabilitar autocomplete en todo el formulario:
<form autocomplete="off" ...>
O si lo necesitas dinámicamente:
<form autocomplete="random-string" ...>
Para deshabilitar el autocomplete en un elemento individual (independientemente de que la configuración del formulario esté presente o no)
<input autocomplete="off" ...>
O si lo necesitas dinámicamente:
<input autocomplete="random-string" ...>
Y recuerde que ciertos agentes de usuario pueden anular incluso sus intentos más duros para desactivar el autocomplete .
Cambie el atributo de tipo de entrada a type="search" .
Google no aplica el relleno automático a las entradas con un tipo de búsqueda.
Después de haber probado todas las soluciones, esto es lo que parece estar funcionando para la versión de Chrome: 45, con el campo que tiene la contraseña:
jQuery(''document'').ready(function(){
//For disabling Chrome Autocomplete
jQuery( ":text" ).attr(''autocomplete'',''pre''+Math.random(0,100000000));
});
Después de que el chrome v. 34, el ajuste autocomplete="off" en la etiqueta <form> no funciona
Hice los cambios para evitar este comportamiento molesto:
- Elimine el
namey elidde la entrada de contraseña - 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 hacer que el formulario funcione, ponga este código para que se ejecute cuando el usuario haga clic en el botón de envío, o cuando quiera 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" en la entrada de la contraseña, así que las puse de nuevo antes de activar la presentación.
En Chrome 48+ usa esta solución:
Ponga los campos falsos antes de los 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>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; }¡Lo hiciste!
También esto funcionará para versiones anteriores.
En lugar de autocomplete = "off" use autocomplete = "false" ;)
de: https://.com/a/29582380/75799
Encontré que esta solución es la más apropiada:
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);
}
}
Se debe cargar después de que esté listo dom, o después de que el formulario se rinda.
Estoy publicando esta respuesta para aportar 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 inicio 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 esto ya no funciona o si tiene un problema con otro navegador o versión.
Aprobado en:
- Cromo: 49
- Firefox: 44, 45
- Borde: 25
- Internet Explorer: 11
Evitar 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">
Impedir autocompletar un campo ( podría no funcionar ):
<input type="text" name="field" autocomplete="nope">
Explicación:
autocomplete aún funciona en un <input> pesar de tener autocomplete="off" , pero puede cambiar a 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 (onload):
(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 (onload):
(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+
Hasta la semana pasada, las dos soluciones siguientes parecían funcionar para Chrome, IE y Firefox. Pero con el lanzamiento de Chrome versión 48 (y aún en 49), ya no funcionan:
- Lo siguiente en la parte superior del formulario:
<input style="display:none" type="text" name="fakeUsername"/>
<input style="display:none" type="password" name="fakePassword"/>
Lo siguiente en el elemento de entrada de contraseña:
autocompletar = "apagado"
Así que para solucionar esto rápidamente, al principio intenté usar un truco importante para configurar inicialmente el elemento de entrada de contraseña como deshabilitado y luego usé un setTimeout en la función de documento listo para habilitarlo nuevamente.
setTimeout(function(){$(''#PasswordData'').prop(''disabled'', false);}, 50);
Pero esto me pareció una locura e hice más búsquedas y encontré la respuesta de @tibalts en Desactivar la función Autocompletar de Chrome . Su respuesta es usar autocomplete = "nueva-contraseña" en la entrada de contraseñas y esto parece funcionar en todos los navegadores (he mantenido mi número de corrección 1 arriba en esta etapa).
Aquí está el enlace en la discusión para desarrolladores de Google Chrome: https://code.google.com/p/chromium/issues/detail?id=370363#c7
He resuelto la interminable lucha con Google Chrome con el uso de caracteres aleatorios.
<input name="name" type="text" autocomplete="rutjfkde">
Espero que ayude a otras personas.
La solución en este momento es usar type="search" . Google no aplica autocompletar a las entradas con un tipo de búsqueda.
Consulte: https://twitter.com/Paul_Kinlan/status/596613148985171968
Actualización 04/04/2016: ¡ Parece que esto está arreglado! Ver http://codereview.chromium.org/1473733008
La versión 34 de Chrome ahora ignora el autocomplete=off , vea esto .
Mucha discusión sobre si esto es algo bueno o malo? ¿Cuál es tu opinión?
Lo resolví de otra manera. Puedes probar esto.
<input id="passfld" type="text" autocomplete="off" />
<script type="text/javascript">
// Using jQuery
$(function(){
setTimeout(function(){
$("input#passfld").attr("type","password");
},10);
});
// or in pure javascript
window.onload=function(){
setTimeout(function(){
document.getElementById(''passfld'').type = ''password'';
},10);
}
</script>
Para cualquiera que busque una solución a esto, finalmente lo descubro.
Chrome solo obedece el autocomplete = "off" si la página es una página HTML5 (estaba usando XHTML).
Convertí mi página a HTML5 y el problema desapareció (facepalm).
Para una solución 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, ya 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: Error cerrado como "No se solucionará" por Chromium Team el 11 de marzo de 2016. Vea el último comentario en mi informe de error originalmente archivado , para una explicación completa. TL; DR: usa atributos de autocompletado semántico como autocompletar = "nueva dirección de calle" para evitar que Chrome realice el llenado automático.
Parece que Chrome ahora ignora autocomplete="off" menos que esté en la etiqueta <form autocomplete="off"> .
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
Si bien estoy de acuerdo en que Autocompletar debe ser una opción del usuario, hay ocasiones en que Chrome es demasiado entusiasta con él (otros navegadores también pueden serlo). Por ejemplo, un campo de contraseña con un nombre diferente todavía se completa automáticamente con una contraseña guardada y el campo anterior se rellena con el nombre de usuario. Esto es particularmente importante cuando el formulario es un formulario de administración de usuarios para una aplicación web y no desea que el llenado automático lo rellene con sus propias credenciales.
Chrome ignora completamente autocompletar = "off" ahora. Si bien los trucos JS pueden funcionar, encontré una forma simple que funciona en el momento de escribir:
Establezca el valor del campo de contraseña en el carácter de control 8 ( "/x08" en PHP o  en HTML). Esto detiene el llenado automático de Chrome del 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.
Visto que el cromo ignora el autocomplete="off" , lo resuelvo con una forma estúpida que usa la "entrada falsa" para hacer trampa del cromo 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 rellenará la "entrada falsa" y, cuando la envíe, el servidor tomará el valor de "entrada real".
autocomplete=off se ignora en gran medida en los navegadores modernos, principalmente debido a los administradores de contraseñas, etc.
Puede intentar agregar este autocomplete="new-password" que no es totalmente compatible con todos los navegadores, pero funciona en algunos
¿Al navegador no le importa autocompletar = apagado automático o incluso rellena las credenciales en el campo de texto incorrecto?
Lo arreglé configurando el campo de contraseña en solo lectura y lo activé, cuando el usuario hace clic en él o usa la tecla de tabulación para este campo.
corrija el autocompletar del navegador en: solo lectura y establezca la escritura en el enfoque (al hacer clic con el mouse y tabular los campos)
<input type="password" readonly
onfocus="$(this).removeAttr(''readonly'');"/>
Actualización: Mobile Safari coloca el cursor en el campo, pero no muestra el teclado virtual. La nueva correcció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
Por cierto, más información sobre mi observación:
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 puede controlarlo, a veces incluso autocompletar = desactivado no impide rellenar las credenciales en los campos incorrectos, pero no el campo de usuario o apodo.
ACTUALIZAR
Parece que ahora Chrome ignora el style="display: none;" o style="visibility: hidden; atributos.
Puedes cambiarlo por algo como:
<input style="opacity: 0;position: absolute;">
<input type="password" style="opacity: 0;position: absolute;">
En mi experiencia, Chrome solo completa automáticamente la primera <input type="password"> y la anterior <input> . Así que he añadido:
<input style="display:none">
<input type="password" style="display:none">
En la parte superior de la <form> y se resolvió el caso.
Actualizar
Por favor, eche un vistazo a https://github.com/terrylinooo/jquery.disableAutoFill
Este complemento aleatorizará el atributo de nombre de entrada de forma predeterminada. Se restaurará al nombre del campo original al enviar el formulario. Esto es para evitar la finalización automática de todos los navegadores (incluye extensiones de autocompletado de terceros) no solo para Google Chrome.
¡Parece que esto está arreglado! Ver https://codereview.chromium.org/1473733008
Al usar un widget como Autocompletar de la interfaz de usuario de jQuery, asegúrese de verificar que no esté agregando / cambiando el atributo de autocompletar para desactivarlo. Descubrí que esto es cierto al usarlo y romperé cualquier trabajo que haya hecho para anular el almacenamiento en caché de los campos del navegador. Asegúrese de tener un atributo de nombre único y fuerce un atributo de autocompletado único después de que se inicialice el widget. Vea a continuación algunos consejos sobre cómo podría funcionar para su situación.
<?php $autocomplete = ''off_''.time(); ?> <script> $(''#email'').autocomplete({ create: function( event, ui ) { $(this).attr(''autocomplete'',''<? echo $autocomplete; ?>''); }, source: function (request, response) { //your code here }, focus: function( event, ui ) { //your code here }, select: function( event, ui ) { //your code here }, }); </script> <input type="email" id="email" name="email_<? echo $autocomplete; ?>" autocomplete="<? echo $autocomplete; ?>" />
El truco del elemento de entrada oculto aún parece funcionar (Chrome 43) para evitar el autocompletado, pero una cosa a tener en cuenta es que Chrome intentará autocompletarse basándose en la etiqueta del marcador de posición. Debe hacer coincidir el marcador de posición del elemento de entrada oculto con el de la entrada que está intentando desactivar.
En mi caso, tenía un campo con un texto de marcador de posición de ''Ciudad o Código Postal'' que estaba usando con Google Place Autocompletar. Parecía que estaba intentando autocompletarse como si fuera parte de un formulario de dirección. El truco no funcionó hasta que puse el mismo marcador de posición en el elemento oculto que en la entrada real:
<input style="display:none;" type="text" placeholder="City or Zip" />
<input autocomplete="off" type="text" placeholder="City or Zip" />
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" en él.
Por ejemplo
<input type="text" placeholder="name or email" autocomplete="off" />
Lo resolví poniendo un espacio de ancho cero en las palabras del marcador de posición. No más autocompletar de Chrome.
<input type="text" placeholder="nam​e or emai​l" autocomplete="off" />