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

245

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:

alternatywny tekst alternatywny tekst

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

hsz
źródło
4
Chciałbym również sprawdzić, czy jest na to odpowiedź.
Kyle
12
W przypadku stylizacji ten kolor może poważnie z elementami projektu, takimi jak obrysowanie znaczników wejściowych również w Chrome, bardziej chciałbym zmienić kolor niż go wyłączyć.
Kyle
3
Wydaje się, że Google do pewnego stopnia uznaje ten problem. Zobacz code.google.com/p/chromium/issues/detail?id=46543
MitMaro,
1
Aby wyłączyć autouzupełnianie, możesz dodać autocomplete = "off" do swojego elementu wejściowego, np. <Input type = "text" id = "input" autocomplete = "off">
joe_young
1
Tylko dodatkowe informacje: ugryzło mnie to, gdy mam pole hasła. Moje pola zostały automatycznie podświetlone (żółte) i wypełnione dziwną wartością. Znalazłem rozwiązanie tutaj: zigpress.com/2014/11/22/stop-chrome-messing-forms ... Rozwiązanie znajduje się w sekcji zatytułowanej „Wyłącz autouzupełnianie Google Chrome” ... dodaj ukryte pola.
Cokorda Raka

Odpowiedzi:

282

Zmień „biały” na dowolny kolor.

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
}
Fareed Alnamrouti
źródło
4
świetny pomysł. Trzymałbym 50 lub 100, ilekroć jest to wystarczające (pola wejściowe zwykłego rozmiaru), aby uniknąć potencjalnego spadku wydajności na słabszych urządzeniach. (I nie ma potrzeby px po 0)
Frank Nocke
4
Uwielbiam ten hack! Świetne myślenie ... Każdy usuwa autouzupełnianie. Chciałem utrzymać autouzupełnianie po prostu przejechać brzydką żółtą.
Travis,
1
Nie działa, jeśli za polem wejściowym znajdują się obrazy tła, wystarczy wypełnić cały obszar białym kolorem. Próbowałem wszystkich rozwiązań na tej stronie, w tym opartych na jquery, i one nie działały dla mnie, w końcu musiałem dodać autocomplete = "off" do pola.
Myke Black
19
Aby również stylizować kolor tekstu -webkit-text-fill-color- patrz to pytanie
Erwin Wessels
2
jest błąd, może nie zmieniono składni, ale to działa teraz:box-shadow: inset 0 0 0 1000px white !important;
Muhammad Umer
49

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;
}
Gísli Freyr Svavarsson
źródło
Najlepsze rozwiązanie dla mnie, ponieważ wartości kolorów RGBA nie działały -webkit-box-shadow. Eliminuje również potrzebę podawania wartości kolorów dla tej deklaracji: nadal będą obowiązywać wartości domyślne.
Sébastien
jeszcze lepiej jest użyć opóźnienia przejścia zamiast czasu jego trwania, aby w ogóle nie mieszać kolorów
antoine129
dobrze, ale z jakiegoś powodu musiałem przenieść tę regułę na końcu pliku, inaczej nie zadziałało
Igor Mizak
Tego szukałem! Dziękuję Ci!
Achmedzianov Danilian
43

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);
        });
    });
}
Alessandro Benedetti
źródło
To zadziałało, podczas gdy pierwsza odpowiedź nie. Myślę jednak, że nie będę próbował zmieniać zachowania od a). to jest javascript, więc między sekundą działa a nie działa (dopóki js się nie załaduje) ib). może pomylić użytkownika chrome, który jest przyzwyczajony do domyślnego zachowania.
TK123
3
Mój chrom ponownie stosuje żółty do nowego wejścia :(
Dustin Silk
Proszę nie. To nie będzie działać z żadnym frameworkiem JS, tylko dla stron statycznych.
Achmedzianov Danilian
26

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

Kinlan
źródło
7
Toczenie autocomplete="off"nie jest obecnie dostępne.
João
4
Niestety to rozwiązanie nie działa już w Chrome.
henrywright
1
Jest to wysoce niezalecane, ponieważ tak naprawdę nie rozwiązujesz tutaj rzeczywistego problemu. zamiast tego tworzysz nowy, denerwując użytkowników, ponieważ muszą oni ręcznie wpisać swoje (prawdopodobnie) dane do logowania (jeśli nawet pamiętają, czym byli)
xorinzor
25

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

Jason
źródło
6
To było jedyne rozwiązanie, które działało, BEZ wyłączenia autouzupełniania.
Xeroxoid
może ustawienie interwałów nie jest konieczne, ponieważ automatyczne wypełnianie chrome na window.load?
Timo Huovinen,
2
Działa bez usuwania automatycznego uzupełniania, znacznie lepszego rozwiązania niż te z milionami głosów.
Ally
Inne rozwiązania nie działały dla mnie, nawet najbardziej uprzywilejowane, ale to zadziałało. Problem, który jest przeciwieństwem tego, co powiedział @Timo powyżej, polega na tym, że Chrome nie wypełnia się automatycznie w oknie window.load. Mimo że zadziałało, jednym z problemów jest to, że jeśli nie ma elementów -webkit-autouzupełniania, pętla działa ciągle. Nie potrzebujesz nawet przerwy, aby to zadziałało. Po prostu ustaw limit czasu z opóźnieniem 50 milisekund, a wszystko będzie dobrze.
Gavin
16

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

humbads
źródło
Nie działa dobrze, jeśli na polu zastosowano wiele cieni.
Streching moje kompetencje
6

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 .

Mediolan
źródło
3

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

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}
maximilianhp
źródło
3

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>
LeRoy
źródło
To jest jedyny przykład, który działał dla mnie zarówno z tekstem, jak i tłem w wersji Chrome 53.0.2785.116 m
mięsisty
2

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


    }
});
Powiernik
źródło
1
Nie używaj tego skryptu. Jeśli nie ma elementów automatycznie wypełnianych, pętla będzie działała w sposób ciągły co 20 milisekund. Interwał nie jest potrzebny. Ustaw limit czasu po Window.load na około 50 milisekund, a to będzie dużo czasu na usunięcie stylizacji.
Gavin
2

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);
}
Arjan
źródło
To jest dla mnie najlepsze. Ale BŁĄD wciąż tam jest i, jak widać, nie ma daty do ustalenia. code.google.com/p/chromium/issues/detail?id=46543#c22
Eduardo M
Nigdy nie wyczyścisz swojego przedziału. To jest niechlujny kod, nie używaj go.
Gavin,
1
W rzeczywistości to nie działa. Nie mogę wpisać niczego w danych wejściowych, ponieważ są one ciągle klonowane. prawie tam ...
Dustin Silk
spróbuj tego var id = window.setInterval (function () {$ ('input: -webkit-autofill'). each (function () {var clone = $ (this) .clone (true, true); $ (this) . po (klon) .remove ();});}, 20); $ ('input: -webkit-autofill'). focus (function () {window.clearInterval (id);});
Dustin Silk
2

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.

Matt Goo
źródło
2

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 */
Bhavesh Gangani
źródło
1

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.

Alex Sarnowski
źródło
1

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;
}
Alex
źródło
1
dodanie !importantjest konieczne, ale dzięki, pomogło mi to bardzo.
Polochon
0

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);
    });
}
I w końcu
źródło
0

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.

cryss
źródło
0

Ż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

ja
źródło
0

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

$(document).ready(function(e) {
    if ($.browser.webkit) {
        $('#input_id').val(' ').val('');
    }
});
użytkownik3638028
źródło
0

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');
Ahmad Ajmi
źródło
Nie działa w Chrome. Gdy tylko pole zmieni się na typ = hasło, Chrome je wypełnia
mowgli,
0

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);});
Dustin Silk
źródło
0

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

Андрій Глущенко
źródło
0

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;
}
Merlin
źródło
0

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.

Matas Vaitkevicius
źródło
0

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;
}
Sebastian
źródło
-1

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);
    }
});
Charly Novoa
źródło
-2
<input type="text" name="foo" autocomplete="off" />

Podobne pytanie: Link

Aditya P Bhatt
źródło
chrome ignoruje autouzupełnianie = "wyłączone"
Sven van den Boogaart
Wyłącz autouzupełnianie w Google Chrome: <a href=" browsers.about.com/od/googlechrome/ss/...>
Aditya P Bhatt
-5

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

form :focus {
  outline: none;
}

źródło
3
to kontur na pudełku po kliknięciu, a nie kolor tła automatycznie wypełnionego wejścia
Claire