Formularz autouzupełniania Google Chrome i jego żółte tło

Mam problem projektowy z Google Chrome i funkcją autouzupełniania formularzy. Jeśli Chrome pamięta login / hasło, zmienia kolor tła na żółty.

Oto kilka zrzutów ekranu:

Jak usunąć to tło lub po prostu wyłączyć autouzupełnianie?

Zmień „biały” na dowolny kolor.

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

Jeśli chcecie przezroczystych pól wejściowych, możecie użyć przejścia i opóźnienia przejścia.

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

Rozwiązanie tutaj :

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

W przeglądarce Firefox można wyłączyć wszystkie autouzupełnianie w formularzu za pomocą atrybutu autocomplete = "off / on". Podobnie poszczególne elementy autouzupełniania można ustawić przy użyciu tego samego atrybutu.

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

Możesz to przetestować w Chrome, tak jak powinno działać.

Jeśli chcesz zachować autouzupełnianie, a także wszelkie dane, dołączone moduły obsługi i funkcje dołączone do elementów wejściowych, wypróbuj ten skrypt:

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

Odpytuje, dopóki nie znajdzie żadnych elementów autouzupełniania, klonuje je, w tym dane i zdarzenia, a następnie wstawia je do DOM w tej samej lokalizacji i usuwa oryginał. Zatrzymuje sondowanie, gdy znajdzie klon do sklonowania, ponieważ autouzupełnianie czasami zajmuje sekundę po załadowaniu strony. Jest to odmiana poprzedniej próbki kodu, ale jest bardziej niezawodna i zachowuje jak największą funkcjonalność.

(Potwierdzono działanie w Chrome, Firefox i IE 8.)

Poniższy CSS usuwa żółty kolor tła i zastępuje go wybranym kolorem tła. Nie wyłącza automatycznego wypełniania i nie wymaga hacków jQuery ani 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;
}

Rozwiązanie skopiowane z: Zastąp wypełnianie formularzy przeglądarki i podświetlanie danych wejściowych za pomocą HTML / CSS

Pracowałem dla mnie, wymagana była tylko zmiana css.

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

możesz wstawić dowolny kolor zamiast #ffffff .

Trochę zuchwały, ale działa idealnie dla mnie

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

Kombinacja odpowiedzi zadziałała dla mnie

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

Oto wersja Jasona autorstwa MooTools. Naprawia to również w Safari.

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


    }
});

To rozwiązuje problem zarówno w Safari, jak i 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);
}

Pomogło mi to, tylko wersja CSS.

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

gdzie biel może mieć dowolny kolor.

Używam tego,

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

W swoim tagu po prostu wstaw ten mały wiersz kodu.

autocomplete="off"

Nie należy jednak umieszczać tego w polu nazwa użytkownika / adres e-mail / nazwa użytkownika, ponieważ jeśli nadal chcesz korzystać z autouzupełniania, spowoduje to wyłączenie tego pola. Ale znalazłem sposób na obejście tego, po prostu umieść kod w tagu wejściowym hasła, ponieważ i tak nigdy nie uzupełniasz automatycznie. Ta poprawka powinna usunąć siłę koloru, zdolność autouzupełniania matinain w polu adresu e-mail / nazwy użytkownika i pozwala uniknąć niepotrzebnych włamań, takich jak Jquery lub javascript.

Jeśli chcesz się go całkowicie pozbyć, dostosowałem kod w poprzednich odpowiedziach, aby działał również na aktywowaniu, aktywowaniu i skupieniu:

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

Oto rozwiązanie Mootools działające tak samo jak Alessandro - zastępuje każde zmienione wejście nowym.

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

Co z tym rozwiązaniem:

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

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

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

Wyłącza automatyczne uzupełnianie i automatyczne wypełnianie (więc żółte tło znikają), czeka 100 milisekund, a następnie przywraca funkcję automatycznego uzupełniania bez automatycznego wypełniania.

Jeśli masz dane wejściowe wymagające automatycznego wypełnienia, podaj im auto-complete-onklasę css.

Żadne z rozwiązań nie działało dla mnie, nazwa użytkownika i hasło nadal były zapełniane i otrzymywały żółte tło.

Zadałem więc sobie pytanie: „W jaki sposób Chrome określa, co należy automatycznie wypełnić na danej stronie?”

„Czy szuka identyfikatorów wejściowych, nazw wejściowych? Identyfikatorów formularzy? Działanie formularza?”

Dzięki moim eksperymentom z nazwą użytkownika i hasłem znalazłem tylko dwa sposoby, które spowodowałyby, że Chrome nie był w stanie znaleźć pól, które powinny zostać automatycznie wypełnione:

1) Umieść hasło przed tekstem. 2) Nadaj im to samo imię i nazwisko ... lub bez imienia i nazwiska.

Po załadowaniu strony za pomocą javascript możesz zmienić kolejność danych wejściowych na stronie lub dynamicznie nadać im nazwę i identyfikator ...

Chrome nie wie, co go trafiło ... autouzupełnianie pozostaje wyłączone.

Szalony hack, wiem. Ale to działa dla mnie.

Chrome 34.0.1847.116, OSX 10.7.5

Jedyny sposób, który działa dla mnie to: (wymagane jQuery)

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

Rozwiązałem ten problem z polem hasła, które mi się podoba:

Ustaw typ wprowadzania na tekst zamiast hasła

Usuń wartość wejściową tekstu za pomocą jQuery

Konwertuj typ danych wejściowych na hasło za pomocą jQuery

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

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

Aktualizacja rozwiązania Arjans. Próbując zmienić wartości, nie pozwoliłoby ci to. To działa dobrze dla mnie. Gdy skupisz się na wejściu, zmieni kolor na żółty. jest wystarczająco blisko.

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

Wypróbuj ten kod:

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

Odpowiedź na Namrouti jest poprawna. Ale tło jest nadal żółte po wybraniu wejścia . Dodanie !importantnapraw problem. Jeśli chcesz również textareai selectprzy takim samym zachowaniu, po prostu dodajtextarea:-webkit-autofill, select:-webkit-autofill

Tylko dane wejściowe

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

wprowadź, wybierz, pole tekstowe

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

Dodawanie autocomplete="off" nie spowoduje cięcia.

Zmień atrybut typu danych wejściowych na type="search".
Google nie stosuje automatycznego wypełniania do danych wejściowych z rodzajem wyszukiwania.

Mam nadzieję, że to pozwoli Ci zaoszczędzić trochę czasu.

Jeśli chcesz uniknąć żółtego migotania do momentu nałożenia css, uderz w takiego złego chłopca:

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

Ostateczne rozwiązanie:

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

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

Podobne pytanie: Link

Właśnie znalazłem się z tym samym pytaniem. To działa dla mnie:

form :focus {
  outline: none;
}