html autocomplete="new-password" - Desactivación de Chrome Autofill




disable remove (25)

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.

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?


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


La única forma en que funciona para mí fue: (jQuery requerido)

$(document).ready(function(e) {
    if ($.browser.webkit) {
        $('#input_id').val(' ').val('');
    }
});

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

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.


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

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 .


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í.


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!


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.


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:

https://www.w3.org/wiki/HTML/Elements/input/search


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


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.


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"

Para mi simple

<form autocomplete="off" role="presentation">

Lo hizo.

Probado en múltiples versiones, el último intento fue el 56.0.2924.87


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


Al configurar autocompletepara offdebería funcionar aquí, tengo un ejemplo que usa google en la página de búsqueda. Encontré esto en el elemento de inspección.

Editar : En caso de offque no funcione, intente falseo nofill. En mi caso está trabajando con chrome versión 48.0.


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/


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

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

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

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>

<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


Si está utilizando Google Chrome en Linux, el siguiente comando funciona.

google-chrome  --disable-web-security






html forms google-chrome autocomplete autofill