html - remove - input type password no autocomplete

Autocompletar formulario de Google Chrome y su fondo amarillo.

Question

Tengo problemas de diseño con Google Chrome y su función de autocompletar formularios. Si Chrome recuerda algún nombre de usuario / contraseña, cambia el color de fondo a amarillo.

Aquí hay algunas capturas de pantalla:

¿Cómo eliminar ese fondo o simplemente deshabilitar este autocompletar?

Answer 1

¿Qué hay de esa solución?

if ($.browser.webkit) {
    $(function() {
        var inputs = $(''input:not(.auto-complete-on)'');

        inputs.attr(''autocomplete'', ''off'');

        setTimeout(function() {
            inputs.attr(''autocomplete'', ''on'');
        }, 100);
    });
}

Desactiva la función de autocompletar y autocompletar (para que desaparezcan los fondos amarillos), espera 100 milisegundos y luego vuelve a activar la funcionalidad de autocompletar sin autocompletar.

Si tiene entradas que deben auto-complete-on deles una clase css con auto-complete-on .

Answer 2

Agregar autocomplete="off" no lo va a cortar.

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.

Espero que esto te ahorre tiempo.

Answer 3

Aquí está la versión de MooTools de Jason. Lo arregla en Safari también.

window.addEvent(''domready'',function() { 
    $(''username'').focus();

    if ((navigator.userAgent.toLowerCase().indexOf(/"chrome/") >= 0)||(navigator.userAgent.toLowerCase().indexOf(/"safari/") >= 0))
    {

        var _interval = window.setInterval(function ()
        {
            var autofills = $$(''input:-webkit-autofill'');
            if (autofills.length > 0)
            {

                window.clearInterval(_interval); // stop polling
                autofills.each(function(el)
                {
                    var clone = el.clone(true,true).inject(el,''after'');;
                    el.dispose();
                });
            }
        }, 20);                                               


    }
});

Answer 4

Aquí hay una solución de Mootools que hace lo mismo que la de Alessandro: reemplaza cada entrada afectada por una nueva.

if (Browser.chrome) {
    $$(''input:-webkit-autofill'').each(function(item) {
        var text = item.value;
        var name = item.get(''name'');
        var newEl = new Element(''input'');
        newEl.set(''name'', name);
        newEl.value = text;
        newEl.replaces(item);
    });
}

Answer 5

Cambia "blanco" a cualquier color que quieras.

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
}

Answer 6

El siguiente CSS elimina el color de fondo amarillo y lo reemplaza con un color de fondo de su elección. No desactiva el autocompletado y no requiere hacks jQuery o Javascript.

input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */
    -webkit-text-fill-color: #333;
}
input:-webkit-autofill:focus {
    -webkit-box-shadow: /*your box-shadow*/,0 0 0 50px white inset;
    -webkit-text-fill-color: #333;
}

Solución copiada de: anular el rellenado de formularios del navegador y el resaltado de entrada con HTML / CSS

Answer 7

En Firefox puedes desactivar todo autocompletar en un formulario usando el atributo autocomplete = "off / on". Del mismo modo, los elementos individuales de autocompletado se pueden configurar utilizando el mismo atributo.

<form autocomplete="off" method=".." action="..">  
<input type="text" name="textboxname" autocomplete="off">

Puedes probar esto en Chrome como debería funcionar.

Answer 8

En su etiqueta, simplemente inserte esta pequeña línea de código.

autocomplete="off"

Sin embargo, no coloque esto en el campo nombre de usuario / correo electrónico / nombre de usuario porque si todavía está buscando usar el autocompletado, lo deshabilitará para este campo. Pero encontré una forma de evitar esto, simplemente coloque el código en la etiqueta de entrada de su contraseña porque nunca se autocompletan las contraseñas de todos modos Esta solución debe eliminar la fuerza de color, la capacidad de autocompletar de matina en su campo de correo electrónico / nombre de usuario, y le permite evitar trucos voluminosos como Jquery o javascript.

Answer 9

Esto me ayudó, una versión única de CSS.

input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; }

Donde el blanco puede ser del color que quieras.

Answer 10

Esto soluciona el problema tanto en Safari como en Chrome.

if(navigator.userAgent.toLowerCase().indexOf("chrome") >= 0 || navigator.userAgent.toLowerCase().indexOf("safari") >= 0){
window.setInterval(function(){
    $(''input:-webkit-autofill'').each(function(){
        var clone = $(this).clone(true, true);
        $(this).after(clone).remove();
    });
}, 20);
}

Answer 11

He solucionado este problema para un campo de contraseña que tengo como esto:

Establezca el tipo de entrada en texto en lugar de contraseña

Eliminar el valor del texto de entrada con jQuery

Convierte el tipo de entrada a contraseña con jQuery

<input type="text" class="remove-autofill">

$(''.js-remove-autofill'').val('''');    
$(''.js-remove-autofill'').attr(''type'', ''password'');

Answer 12

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

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

Answer 13

La solución definitiva:

$(document).ready(function(){
    var contadorInterval = 0;
    if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0)
    {
        var _interval = window.setInterval(function ()
        {
            var autofills = $(''input:-webkit-autofill'');
            if (autofills.length > 0)
            {
                window.clearInterval(_interval); // stop polling
                autofills.each(function()
                {
                    var clone = $(this).clone(true, true);
                    $(this).after(clone).remove();
                    setTimeout(function(){
//                        $("#User").val('''');
                        $("#Password").val('''');
                    },10);
                });
            }
            contadorInterval++;
            if(contadorInterval > 50) window.clearInterval(_interval); // stop polling
        }, 20);
    }else{
        setTimeout(function(){
//            $("#User").val('''');
            $("#Password").val('''');
        },100);
    }
});

Answer 14

Me encontré con la misma pregunta. Esto funciona para mí:

form :focus {
  outline: none;
}

Answer 15

Ninguna de las soluciones funcionó para mí, las entradas de nombre de usuario y contraseña aún se rellenaron y se les dio un fondo amarillo.

Así que me pregunté: "¿Cómo determina Chrome qué se debe completar automáticamente en una página determinada?"

"¿Busca identificadores de entrada, nombres de entrada? ¿Id. De formulario? ¿Acción de formulario?"

A través de mi experimentación con el nombre de usuario y las entradas de contraseña, solo encontré dos formas que podrían hacer que Chrome no pueda encontrar los campos que deben completarse automáticamente:

1) Ponga la entrada de contraseña antes de la entrada de texto. 2) Dales el mismo nombre e identificación ... o ningún nombre e identificación.

Después de que se cargue la página, con javascript puede cambiar el orden de las entradas en la página o darles su nombre e identificación dinámicamente ...

Y Chrome no sabe qué golpeó ... el autocompletar se queda apagado.

Hack loco, lo sé. Pero está funcionando para mí.

Chrome 34.0.1847.116, OSX 10.7.5

Answer 16

Prueba este código:

  $(function(){
     setTimeout(function(){
      $(''[name=user_password]'').attr(''type'', ''password'');
     }, 1000);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<input name="user_password" type="password">

Answer 17

Si desea conservar el autocompletado, así como cualquier dato, manejadores adjuntos y funcionalidad adjunta a sus elementos de entrada, pruebe este script:

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0)
{
    var _interval = window.setInterval(function ()
    {
        var autofills = $(''input:-webkit-autofill'');
        if (autofills.length > 0)
        {
            window.clearInterval(_interval); // stop polling
            autofills.each(function()
            {
                var clone = $(this).clone(true, true);
                $(this).after(clone).remove();
            });
        }
    }, 20);
}

Sondea hasta que encuentra elementos de relleno automático, los clona, ​​incluidos los datos y los eventos, luego los inserta en el DOM en la misma ubicación y elimina el original. Detiene el sondeo una vez que encuentra cualquier clon, ya que el autocompletado toma a veces un segundo después de cargar la página. Esta es una variación de un ejemplo de código anterior, pero más robusto y mantiene la mayor funcionalidad posible intacta.

(Confirmado trabajando en Chrome, Firefox e IE 8).

Answer 18

Si desea deshacerse de él por completo, he ajustado el código en las respuestas anteriores para que funcione en modo activo, activo y enfocado también:

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:active, input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px white inset;
}

Answer 19

Si quieren campos de entrada transparentes, pueden usar la transición y el retardo de transición.

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-transition-delay: 9999s;
    -webkit-transition: color 9999s ease-out, background-color 9999s ease-out;
}

Answer 20

Si quieres evitar el parpadeo amarillo hasta que se aplique a tu css, haz una transición en ese chico malo, así:

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    transition: background-color 10s ease-in-out 0s;
}

Answer 21

Solución here :

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
    $(window).load(function(){
        $(''input:-webkit-autofill'').each(function(){
            var text = $(this).val();
            var name = $(this).attr(''name'');
            $(this).after(this.outerHTML).remove();
            $(''input[name='' + name + '']'').val(text);
        });
    });
}

Answer 22

Trabajó para mí, solo el cambio de css requerido.

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset!important;
}

Puedes poner cualquier color en lugar de #ffffff .

Answer 23

Un poco hacky pero funciona perfectamente para mi.

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

Answer 24

Una actualización de la solución Arjans. Al intentar cambiar los valores no te dejaría. Esto funciona bien para mi. Cuando te enfocas en una entrada, entonces se pondrá amarilla. es lo suficientemente cerca

$(document).ready(function (){
    if(navigator.userAgent.toLowerCase().indexOf("chrome") >= 0 || navigator.userAgent.toLowerCase().indexOf("safari") >= 0){
        var id = window.setInterval(function(){
            $(''input:-webkit-autofill'').each(function(){
                var clone = $(this).clone(true, true);
                $(this).after(clone).remove();
            });
        }, 20);

        $(''input:-webkit-autofill'').focus(function(){window.clearInterval(id);});
    }
});

$(''input:-webkit-autofill'').focus(function(){window.clearInterval(id);});

Answer 25

Una combinación de respuestas funcionó para mí.

<style>
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0px 1000px #373e4a inset !important;
           -webkit-text-fill-color: white !important;
   }
</style>

Answer 26

Yo uso esto,

input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset !important; }
input:focus:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset !important; }
/* You can use color:#color to change the color */

Answer 27

La respuesta de namrouti es correcta. Pero el fondo todavía se pone amarillo cuando se selecciona la entrada . Añadiendo !important solucionar el problema. Si también desea textarea y select con el mismo comportamiento, simplemente agregue textarea:-webkit-autofill, select:-webkit-autofill

Solo entrada

input:-webkit-autofill {
    background-color: rgb(250, 255, 189) !important;
}

input, select, textarea

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: rgb(250, 255, 189) !important;
}

Answer 28

<input type="text" name="foo" autocomplete="off" />

Pregunta similar: Link