html - prevent - remove autocomplete input chrome




Desactivación de Chrome Autofill (20)

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.


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!


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>

  1. Debe ocultar el elemento ficticio sin usar la display:none css display:none así 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.


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

http://jsfiddle.net/mwshpx1o/1/


Tienes que añadir este atributo:

autocomplete="new-password"

Fuente de enlace: Artículo completo


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>

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="&nbsp;">
<input type="password" name="password" value="&nbsp;">

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

jsfiddle con pruebas


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.


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




autofill