remove - html prevent autocomplete chrome
Google Chrome autocompleta todas las entradas de contraseña (6)
Mi problema
Debo haber activado google para autocompletar para un inicio de sesión en mi sitio, sin embargo, ahora estoy tratando de autocompletar los datos de inicio de sesión cada vez que quiera editar la información de mi cuenta o editar la información de la cuenta de otro usuario (como administrador). Rellena mis datos en lugares extraños. El problema parece ser que Chrome completa automáticamente cualquier entrada con un tipo de contraseña y luego la entrada que sea antes (vea la imagen a continuación) . Si pongo un cuadro de selección delante de él, entonces no se llenará automáticamente.
Obviamente, no quiero tener que pasar y eliminar la contraseña / teléfono cada vez que edito un usuario. Tampoco quiero que mis usuarios tengan que hacer eso cuando están editando su propia cuenta. ¿Cómo lo elimino?
Lo que he intentado (sin éxito)
- Agregar autocompletado = "off" al formulario, así como las entradas del teléfono y la contraseña.
- Agregando valor = "" a ambas entradas
- Cambiar el nombre = de la entrada de contraseña. Probé pw, pass, password y cheese (en caso de que Chrome estaba recogiendo el nombre)
- Agregando autocomplete = "off" a través de jquery .attr
Lo que he encontrado
Encontré que Google puede estar ignorando intencionalmente autocompletar: Google ignorando autocompletar
Encontré otro usuario que publicó una pregunta similar, pero la solución no me funciona: deshabilitar la función Autocompletar de Chrome
También encontré a otro usuario haciendo una solución alternativa que involucraba la creación de un campo de contraseña oculta que tomaría el autocompletado de google. Preferiría una solución más limpia, ya que en mi caso también necesitaría una entrada oculta sobre ella para evitar que ambos rellenen automáticamente: Deshabilitar autocompletar en cromo sin deshabilitar autocompletar
A veces, incluso autocompletar = desactivado no impide rellenar las credenciales en los campos incorrectos, pero no el campo de usuario o apodo.
Solución: el autocompletador del navegador se realiza en modo de solo lectura y se puede escribir con enfoque.
<input type="password" readonly onfocus="this.removeAttribute(''readonly'');"/>
(foco = al hacer clic con el mouse y tabular a través de campos)
Actualización: Mobile Safari coloca 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
Explicación: ¿El navegador rellena automáticamente las credenciales en el campo de texto incorrecto?
@Samir: Chrome auto llena cualquier entrada con un tipo de contraseña y luego, sea cual sea la entrada antes de que sea
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í.
Chrome tiene actualizaciones, las entradas falsas ya no funcionan.
Chrome parece recordar todo después de una conexión exitosa a la red 200, se recordará cualquier entrada [tipo = contraseña] activada en la pantalla.
He intentado establecer dinámicamente las entradas para escribir texto, borrar el contenido, no siempre funcionan, especialmente cuando hay un botón para obtener el código de verificación antes de enviar el formulario.
Finalmente, lo descubrí:
escuchar entradas enfocar y difuminar eventos,
cada vez desenfoque:
var psw1 = $(''input[name=psw1]'').val();
$(''input[name=psw1]'').val((new Array(psw1.length)).join(''*''));
$(''input[name=psw1]'').attr(''type'', ''text'');
enfoque cada vez que:
$(''input[name=psw1]'').attr(''type'', ''password'');
$(''input[name=psw1]'').val(psw1)
el efecto secundario es obvio, el contenido de la entrada cambiaría cada evento de enfoque y desenfoque, pero este método evita que Chrome recuerde perfectamente la contraseña.
En HTML5, con el atributo autocompletar, hay una nueva propiedad llamada "nueva contraseña" que podemos utilizar para solucionar este problema. Los siguientes trabajos para mí.
<input id="userPassword" type="password" autocomplete="new-password">
contraseña actual: permite que el navegador o administrador de contraseñas ingrese la contraseña actual para el sitio. Esto proporciona más información que "on", ya que le permite al navegador o al administrador de contraseñas usar la contraseña actualmente conocida para el sitio en el campo, en lugar de una nueva.
nueva contraseña: permite que el navegador o administrador de contraseñas ingrese automáticamente la nueva contraseña para el sitio. Esto podría generarse automáticamente en función de los otros atributos del control, o simplemente podría decirle al navegador que presente un widget de "nueva contraseña sugerida" de algún tipo.
Consulte: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password
Esto se puede resolver sin hacks, pero no es necesariamente intuitivo. Hay dos decisiones extrañas que hace Chrome. Primero, Chrome ignora autocomplete="off" en su análisis, y segundo, Chrome asume que el campo que viene antes de un campo de contraseña debe ser un campo de nombre de usuario / correo electrónico, y debe autocompletarse como tal.
Sin embargo, hay maneras de evitar esto que aprovechan la especificación del atributo autocompletar de HTML5.
Como verá en el siguiente enlace, hay valores estándar para el atributo autocomplete . Para evitar que Chrome asuma que el campo antes de una contraseña es un campo de correo electrónico, use uno de los valores oficiales (por ejemplo, tel para un número de teléfono), o invente un valor que no exista en la lista, pero que tampoco esté off o false
Google sugiere que use uno de los valores estándar con autocomplete="new-tel" prepended al valor, por ejemplo, autocomplete="new-tel" . Si desea que un campo de contraseña no se complete automáticamente, puede usar autocomplete="new-password" , por ejemplo.
Aunque técnicamente, por supuesto, puede hacer que el atributo sea aleatorio sin contexto con el mismo efecto (p. Ej., autocomplete="blahblahblah" ), recomiendo el nuevo prefijo, ya que ayuda a cualquier desarrollador futuro que trabaje en su código en algún contexto de lo que está haciendo. Cumpliendo con este atributo.
Haría un campo de contraseña oculto en lugar de deshabilitar el llenado automático para Chrome. Deshabilitar el relleno automático para usted no lo deshabilita para todos.
Así que tengo esto.
<input type="hidden" name="Password" id="Password" value="Password" /><br />
(Si solo buscas deshabilitarlo por ti mismo, desactívalo usando la configuración de Chrome).
Cómo deshabilitarlo con la configuración de cromos:
Click the Chrome menu Chrome menu on the browser toolbar. Select Settings. Click Show advanced settings and find the "Passwords and forms" section. Deselect the "Enable Autofill to fill out web forms in a single click" checkbox.
Los créditos van al Heinkasner para eso.
Aparte de esos dos métodos, no creo que sea posible deshabilitarlo para todos los usuarios.
- entradas falsas no funcionan
- autocomplete = "off" / "new-password" / "false" y así sucesivamente no funcionan, Chrome los ingresa a todos
Solución que funcionó para nosotros:
<script>
$(document).ready(function(){
//put readonly attribute on all fields and mark those, that already readonly
$.each($(''input''), function(i, el){
if ($(el).attr(''readonly'')) {
$(el).attr(''shouldbereadonly'', ''true'');
} else {
$(el).attr(''readonly'', ''readonly'');
}
});
//Remove unnecessary readonly attributes in timeout
setTimeout(function(){
$.each($(''input''), function(i, el){
if (!$(el).attr(''shouldbereadonly'')) {
$(el).attr(''readonly'', null);
}
});
}, 500);
});
</script>