Mam 2 podstawowe formularze - zaloguj się i zarejestruj, oba na tej samej stronie. Teraz nie mam problemu z autouzupełnianiem formularza logowania,ale formularz rejestracji automatycznie się wypełnia i nie podoba mi się to.
Ponadto style formularzy mają żółte tło, którego nie mogę przesłonić i nie chcę do tego używać wbudowanego CSS. Co mogę zrobić, aby przestały być pomalowane na żółtoi (prawdopodobnie) automatyczne napełnianie? Z góry dziękuję!
Odpowiedzi:
do autouzupełniania możesz użyć:
odnośnie problemu z kolorowaniem:
na twoim zrzucie ekranu widzę, że webkit generuje następujący styl:
1) ponieważ style # id są nawet ważniejsze niż style .class, poniższe mogą działać:
2) jeśli to nie zadziała, możesz spróbować programowo ustawić styl za pomocą javascript
3) jeśli to nie zadziała,
jesteś skazany na porażkę :-)zastanów się: to nie ukryje żółtego koloru, ale sprawi, że tekst będzie znów czytelny.4) rozwiązanie css / javascript:
css:
a następujący javascript musi zostać uruchomiony onload:
na przykład:
powodzenia :-)
5) Jeśli żadne z powyższych nie zadziała, spróbuj usunąć elementy wejściowe, sklonować je, a następnie umieścić sklonowane elementy z powrotem na stronie (działa w Safari 6.0.3):
6) Stąd :
źródło
code
var keepTheInputCloned = setInterval(function(){ var e = document.getElementById('id_email'); var ep = e.parentNode; ep.removeChild(e); var e2 = e.cloneNode(); ep.appendChild(e2); var p = document.getElementById('id_password'); var pp = p.parentNode; pp.removeChild(p); var p2 = p.cloneNode(); pp.appendChild(p2); },50); setTimeout(function(){clearInterval(keepTheInputCloned)},1000);
Oszukać go „silnym” cieniem wewnętrznym:
źródło
Dodaj tę regułę CSS, a żółty kolor tła zniknie. :)
źródło
Prawie wszystkie współczesne przeglądarki to uszanują.
źródło
autocomplete
jest to, że jest nieprawidłowy w HTML przed wersją 5.Po 2 godzinach wyszukiwania wydaje się, że Google Chrome nadal w jakiś sposób nadpisuje żółty kolor, ale znalazłem poprawkę. Będzie działać również przy najechaniu, skupieniu itp. Wszystko, co musisz zrobić, to dodać
!important
do tego.spowoduje to całkowite usunięcie żółtego koloru z pól wejściowych
źródło
Możesz również zmienić atrybut nazwy elementów formularza, aby był generowany, aby przeglądarka nie śledziła tego. JEDNAK firefox 2.x + i Google Chrome nie wydają się mieć z tym większych problemów, jeśli adres URL żądania jest identyczny. Spróbuj po prostu dodać parametr żądania soli i nazwę pola soli do formularza rejestracji.
Jednak myślę, że autocomplete = "off" jest nadal najlepszym rozwiązaniem :)
źródło
Możesz wyłączyć automatyczne uzupełnianie od HTML5 (przez
autocomplete="off"
), ale NIE MOŻESZ zastąpić podświetlenia przeglądarki. Możesz spróbować bawić się::selection
w CSS (większość przeglądarek wymaga prefiksu dostawcy, aby to zadziałało), ale to też prawdopodobnie nie pomoże.O ile dostawca przeglądarki nie zaimplementował specyficznego dla dostawcy sposobu nadpisywania tego, nie możesz nic zrobić z takimi stylami, które już mają zastąpić arkusz stylów witryny dla użytkownika. Są one zwykle stosowane po zastosowaniu arkuszy stylów i ignorują również
! important
nadpisania.źródło
Czasami autouzupełnianie w przeglądarce nadal jest autouzupełniane, gdy masz tylko kod w
<form>
elemencie.Próbowałem też włożyć to do
<input>
elementu i to działało lepiej.Jednak wsparcie dla tego atrybutu dobiega końca, przeczytaj https://bugzilla.mozilla.org/show_bug.cgi?id=956906#c1
https://bugzilla.mozilla.org/show_bug.cgi?id=956906
Innym rozwiązaniem, które znalazłem, jest usunięcie symboli zastępczych w polach wejściowych, które sugerują, że jest to adres e-mail, nazwa użytkownika lub pole telefonu (np. „Twój e-mail”, „E-mail” itp.)
To sprawia, że przeglądarki nie wiedzą, jakiego rodzaju jest to pole, a tym samym nie próbują go automatycznie uzupełniać.
źródło
Jeśli znajduje się w polu wprowadzania, próbujesz cofnąć żółty kolor ...
Może to wyglądać tak:
źródło
To rozwiązuje problem w Safari i Chrome
źródło
Zrzut ekranu, do którego utworzyłeś łącze, mówi, że WebKit używa selektora
input:-webkit-autofill
dla tych elementów. Czy próbowałeś umieścić to w swoim CSS?Jeśli to nie zadziała, prawdopodobnie nic nie zadziała. Pola te są podświetlane, aby ostrzec użytkownika, że zostały automatycznie wypełnione prywatnymi informacjami (takimi jak adres domowy użytkownika) i można argumentować, że zezwolenie na ukrycie strony stwarza zagrożenie bezpieczeństwa.
źródło
form
Element maautocomplete
atrybut, który można ustawić naoff
. Począwszy od CSS,!important
dyrektywa po właściwości zapobiega jej nadpisaniu:Tylko IE6 tego nie rozumie.
Jeśli źle cię zrozumiałem, jest też
outline
właściwość, która może Ci się przydać.źródło
!important
dyrektywę, w takim przypadku mają pierwszeństwo przed wszystkim innym. Powinieneś sprawdzić arkusz stylów klienta użytkownika (chociaż nie wiem, gdzie go znaleźć).Widziałem, że funkcja autouzupełniania paska narzędzi Google została wyłączona za pomocą javascript. Może działać z innymi narzędziami do autouzupełniania; Nie wiem, czy to pomoże w przeglądarkach z wbudowanym autouzupełnianiem.
źródło
Po wypróbowaniu wielu rzeczy znalazłem działające rozwiązania, które nukowały automatycznie wypełniane pola i zastępowały je zduplikowanymi. Aby nie stracić dołączonych wydarzeń, wymyśliłem inne (nieco przydługie) rozwiązanie.
Przy każdym zdarzeniu „input” szybko dołącza zdarzenia „change” do wszystkich zaangażowanych wejść. Sprawdza, czy zostały automatycznie wypełnione. Jeśli tak, wyślij nowe zdarzenie tekstowe, które nakłoni przeglądarkę do myślenia, że wartość została zmieniona przez użytkownika, umożliwiając w ten sposób usunięcie żółtego tła.
źródło
Proste rozwiązanie javascript dla wszystkich przeglądarek:
Klonuj dane wejściowe, resetuj atrybuty i ukrywaj oryginalne dane wejściowe. W przypadku iPada wymagany jest limit czasu
źródło
Ponieważ przeglądarka wyszukuje pola typu hasła, innym rozwiązaniem jest umieszczenie ukrytego pola na początku formularza:
źródło
Przeczytałem wiele wątków i wypróbowałem wiele fragmentów kodu. Po zebraniu tych wszystkich rzeczy jedynym sposobem, aby wyczyścić pola logowania i hasła oraz zresetować ich tło do białego, było:
Zapraszam do komentowania, jestem otwarty na wszystkie ulepszenia, jeśli jakieś znajdziesz.
źródło
Wyłączone autouzupełnianie nie jest obsługiwane przez nowoczesne przeglądarki. Najłatwiejszym sposobem rozwiązania autouzupełniania, które znalazłem, była mała ścieżka z HTML i JS. Pierwszą rzeczą do zrobienia jest zmiana typu danych wejściowych w HTML z „hasło” na „tekst”.
Autouzupełnianie rozpoczyna się po załadowaniu okna. W porządku. Ale kiedy typ twojego pola nie jest „hasłem”, przeglądarka nie wiedziała, jakie pola musi wypełnić. Tak więc nie będzie autouzupełniania w polach formularza.
Następnie powiąż fokus zdarzenia z polem hasła, np. w Backbone:
W
onInputPasswordFocusIn
, po prostu zmień typ pola na hasło, prostym sprawdzeniem:To wszystko!
UPD: ta rzecz nie działa z wyłączonym JavaSciprt
UPD w 2018 roku. Znalazłem też zabawną sztuczkę. Ustaw atrybut readonly na pole wejściowe i usuń go ze zdarzenia aktywności. Po pierwsze uniemożliwia przeglądarce automatyczne wypełnianie pól, po drugie pozwoli na wprowadzanie danych.
źródło
autocomplete=off
, ponieważ działa przez chwilę w FF, Chrome i IE od poprzedniej wersjiSpróbuj z autocomplete = "none" w tagu wejściowym
To działa dla mnie
źródło
Musiałem także zmienić kolor tekstu na coś ciemniejszego (zobacz ciemne kolory motywu StackOverflow).
Skończyło się na hybrydzie @ Tamás Pap, @MCBL i rozwiązania @ don:
źródło
Dlaczego nie umieścić tego w swoim css:
To powinno rozwiązać Twój problem. Chociaż powoduje to problem z użytecznością, ponieważ teraz użytkownik nie widzi, że formularz został automatycznie wypełniony w sposób, do którego jest przyzwyczajony.
[edytuj] Po opublikowaniu tego zobaczyłem, że podobna odpowiedź została już udzielona i że skomentowałeś ją, że nie działa. Nie bardzo rozumiem dlaczego, ponieważ zadziałało, kiedy go przetestowałem.
źródło
input:-webkit-autofill
iinput --webkit-autocomplete
po prostu nie istniejePRAWDZIWYM problemem jest to, że Webkit (Safari, Chrome, ...) ma błąd. Gdy na stronie znajduje się więcej niż jeden [formularz], każdy z [typ wejściowy = "tekst" nazwa = "foo" ...] (tj. Z tą samą wartością atrybutu „nazwa”), wtedy gdy użytkownik powróci na stronę autouzupełnianie zostanie wykonane w polu wejściowym PIERWSZEGO [formularza] na stronie, a nie w [formularzu], który został wysłany. Za drugim razem NEXT [formularz] zostanie wypełniony automatycznie i tak dalej. Wpłynie to tylko na [formularz] z tekstowym polem wejściowym o TEJ SAMEJ nazwie.
Należy to zgłosić programistom Webkit.
Opera automatycznie wypełnia prawy [formularz].
Firefox i IE nie uzupełniają się automatycznie.
Więc powtarzam: to błąd w Webkicie.
źródło