Skąd wiesz, czy przeglądarka automatycznie wypełniła pole tekstowe? Zwłaszcza w przypadku pól nazwy użytkownika i hasła, które wypełniają się automatycznie podczas ładowania strony.
Moje pierwsze pytanie brzmi: kiedy to się dzieje w sekwencji ładowania strony? Czy to jest przed czy po dokumencie. Już?
Po drugie, jak mogę użyć logiki, aby dowiedzieć się, czy tak się stało? To nie jest tak, że chcę temu zapobiec, po prostu podłącz się do zdarzenia. Najlepiej coś takiego:
if (autoFilled == true) {
} else {
}
Jeśli to możliwe, chciałbym zobaczyć jsfiddle pokazujący twoją odpowiedź.
Możliwe duplikaty
Zdarzenie DOM dla autouzupełniania hasła przeglądarki?
Zdarzenia wyzwalane przez autouzupełnianie przeglądarki i JavaScript
- Oba te pytania tak naprawdę nie wyjaśniają, jakie zdarzenia są wyzwalane, po prostu ciągle sprawdzają pole tekstowe (nie jest to dobre dla wydajności!).
źródło
Odpowiedzi:
Problem polega na tym, że autouzupełnianie jest obsługiwane inaczej przez różne przeglądarki. Niektórzy wysyłają zdarzenie zmiany, inni nie. Dlatego prawie niemożliwe jest podpięcie się do zdarzenia, które jest wyzwalane, gdy przeglądarka automatycznie uzupełnia pole wejściowe.
Zmień wyzwalacz zdarzenia dla różnych przeglądarek:
W przypadku pól nazwy użytkownika / hasła:
W przypadku innych pól formularza:
Najlepszą opcją jest wyłączenie autouzupełniania dla formularza
autocomplete="off"
używanego w formularzu lub regularna ankieta w celu sprawdzenia, czy jest wypełniona.W przypadku pytania o to, czy jest on wypełniony w dokumencie, czy przed nim. Już teraz różni się w zależności od przeglądarki, a nawet wersji. W przypadku pól nazwy użytkownika / hasła tylko wtedy, gdy wybierzesz nazwę użytkownika, pole hasła jest wypełnione. Więc w sumie miałbyś bardzo niechlujny kod, jeśli spróbujesz dołączyć do dowolnego wydarzenia.
Możesz dobrze przeczytać o tym TUTAJ
źródło
input
wydarzeniu. To właśnie uruchamia Chrome podczas autouzupełniania (i prawdopodobnie również autouzupełniania, jeśli Chrome to ma; zawsze wyłączam te rzeczy).Rozwiązanie dla przeglądarek WebKit
Z dokumentacji MDN dla pseudoklasy CSS -webkit-autofill :
Możemy zdefiniować regułę css przejścia void na żądanym
<input>
elemencie po jego:-webkit-autofill
edycji. JS będzie wtedy mógł podłączyć się doanimationstart
zdarzenia.Podziękowania dla zespołu Klarna UI . Zobacz ich fajną realizację tutaj:
źródło
Działa to w przypadku mnie w najnowszych przeglądarkach Firefox, Chrome i Edge:
źródło
'input'
! To było dla mnie najłatwiejsze rozwiązanie, ale testowałem tylko pod kątem autouzupełniania, a nie autouzupełniania.W przypadku autouzupełniania Google Chrome działało to dla mnie:
źródło
Na wypadek, gdyby ktoś szukał rozwiązania (tak jak ja dzisiaj), aby wysłuchać zmiany autouzupełniania przeglądarki, oto niestandardowa metoda jquery, którą stworzyłem, aby uprościć proces dodawania odbiornika zmian do wejścia:
Możesz to nazwać tak:
źródło
Dużo czytałem o tym problemie i chciałem zapewnić bardzo szybkie obejście, które mi pomogło.
gdzie
inputBackgroundNormalState
dla mojego szablonu jest „rgb (255, 255, 255)”.Zasadniczo, gdy przeglądarki stosują autouzupełnianie, mają tendencję do wskazywania, że dane wejściowe są automatycznie uzupełniane, stosując inny (irytujący) żółty kolor na wejściu.
Edycja: to działa dla każdej przeglądarki
źródło
Niestety, jedynym niezawodnym sposobem sprawdzenia tej przeglądarki jest sprawdzenie danych wejściowych. Aby był responsywny, słuchaj również wydarzeń. Chrome zaczął ukrywać wartości automatycznego wypełniania przed javascriptem, który wymaga hakowania.
Dodaj poprawkę dla ukrytych wartości hasła autouzupełniania Chrome.
źródło
Na githubie pojawił się nowy składnik polyfill, który rozwiązuje ten problem. Spójrz na zdarzenie autouzupełniania . Wystarczy go zainstalować i voilà, autouzupełnianie działa zgodnie z oczekiwaniami.
źródło
Moje rozwiązanie:
Odsłuchaj
change
zdarzenia w normalny sposób, a po załadowaniu treści DOM zrób to:Spowoduje to uruchomienie zdarzeń zmian dla wszystkich pól, które nie są puste, zanim użytkownik będzie mógł je edytować.
źródło
Napotkałem również ten sam problem, w którym etykieta nie wykryła autouzupełniania, a animacja przesuwającej się etykiety przy wypełnianiu tekstu nakładała się i to rozwiązanie działało dla mnie.
źródło
Szukałem podobnej rzeczy. Tylko Chrome ... W moim przypadku opakowujący element div musiał wiedzieć, czy pole wejściowe zostało wypełnione automatycznie. Mogę więc dodać dodatkowe css, tak jak robi to Chrome w polu wejściowym, gdy automatycznie je wypełnia. Patrząc na wszystkie powyższe odpowiedzi, moje połączone rozwiązanie było następujące:
Kod HTML, aby to zadziałał, byłby
źródło
Wiem, że to stary wątek, ale wyobrażam sobie, że wielu przychodzi tutaj, aby znaleźć rozwiązanie tego problemu.
Aby to zrobić, możesz sprawdzić, czy dane wejściowe mają wartości za pomocą:
Używam tego osobiście do sprawdzania wartości w moim formularzu logowania po załadowaniu, aby włączyć przycisk przesyłania. Kod jest przeznaczony dla jQuery, ale w razie potrzeby można go łatwo zmienić.
źródło
($("#inputID:-webkit-autofill").val().length > 0) {
Jest to rozwiązanie dla przeglądarek z silnikiem renderującym webkit . Gdy formularz jest wypełniany automatycznie, dane wejściowe otrzymają pseudoklasę : -webkit-autofill- (np. Input: -webkit-autofill {...}). Więc to jest identyfikator, który musisz sprawdzić za pomocą JavaScript.
Rozwiązanie z jakimś formularzem testowym:
I javascript:
Problem podczas ładowania strony to uzyskanie wartości hasła, nawet długości. Wynika to z bezpieczeństwa przeglądarki. Również limit czasu , ponieważ przeglądarka wypełni formularz po pewnym czasie.
Ten kod doda klasę auto_filled do wypełnionych danych wejściowych. Próbowałem również sprawdzić wartość lub długość hasła wejściowego, ale zadziałało to po jakimś zdarzeniu na stronie. Próbowałem więc wywołać jakieś zdarzenie, ale bezskutecznie. Na razie to moje rozwiązanie. Cieszyć się!
źródło
Mam idealne rozwiązanie na to pytanie, wypróbuj ten fragment kodu.
Demo jest tutaj
źródło
W Chrome możesz wykryć pola autouzupełniania, ustawiając specjalną regułę css dla elementów automatycznie wypełnianych, a następnie sprawdzając za pomocą javascript, czy do elementu zastosowano tę regułę.
Przykład:
CSS
JavaScript
źródło
Oto rozwiązanie CSS zaczerpnięte z zespołu Klarna UI. Zobacz ich fajną realizację tutaj zasób
U mnie działa dobrze.
źródło
Użyłem tego rozwiązania do tego samego problemu.
Kod HTML powinien zmienić się na:
a kod jQuery powinien znajdować się w
document.ready
:źródło
Użyłem zdarzenia rozmycia w nazwie użytkownika, aby sprawdzić, czy pole pwd zostało automatycznie wypełnione.
Działa to dla IE i powinno działać dla wszystkich innych przeglądarek (sprawdziłem tylko IE)
źródło
blur
wydarzenie. I zastosować tę samą funkcję dlachange
iblur
imprezy i to działało świetnie. Proste rozwiązanie bez dodatkowych bibliotek.Miałem ten sam problem i napisałem to rozwiązanie.
Rozpoczyna odpytywanie w każdym polu wejściowym podczas ładowania strony (ustawiłem 10 sekund, ale możesz dostroić tę wartość).
Po 10 sekundach przerywa odpytywanie w każdym polu wejściowym i rozpoczyna odpytywanie tylko na aktywnym wejściu (jeśli jest). Zatrzymuje się, gdy rozmazasz dane wejściowe i ponownie zaczyna się, gdy je wyostrzysz.
W ten sposób sondujesz tylko wtedy, gdy jest to naprawdę potrzebne i tylko na poprawnym wejściu.
Nie działa to całkiem dobrze, gdy masz wiele wartości wstawianych automatycznie, ale można je dostosować, szukając każdego wejścia w bieżącym formularzu.
Coś jak:
źródło
Jeśli chcesz tylko wykryć, czy autouzupełnianie zostało użyte, czy nie, zamiast dokładnie wykrywać, kiedy i do którego pola zostało użyte automatyczne wypełnianie, możesz po prostu dodać ukryty element, który zostanie automatycznie wypełniony, a następnie sprawdzić, czy to zawiera dowolną wartość. Rozumiem, że może to nie być coś, czym wielu ludzi jest zainteresowanych. Ustaw pole wejściowe z ujemnym tabIndex i współrzędnymi bezwzględnymi dobrze z ekranu. Ważne jest, aby dane wejściowe były częścią tego samego formularza, co reszta danych wejściowych. Musisz użyć nazwy, która zostanie przejęta przez autouzupełnianie (np. „Drugie imię”).
Dołącz te dane wejściowe do formularza i sprawdź jego wartość podczas przesyłania formularza.
źródło
Tam nie wydaje się być rozwiązaniem na to, że nie opiera się na odpytywanie (przynajmniej dla Chrome). Jest prawie tak samo hakerski, ale myślę, że jest nieznacznie lepszy niż sondaże globalne.
Rozważ następujący scenariusz:
Użytkownik zaczyna wypełniać pole 1
Użytkownik wybiera sugestię autouzupełniania, która automatycznie wypełnia pola 2 i 3
Rozwiązanie: zarejestruj onblur we wszystkich polach, które sprawdzają obecność pól automatycznie wypełnianych za pomocą następującego fragmentu kodu jQuery $ (': - webkit-autofill')
Nie będzie to natychmiastowe, ponieważ zostanie opóźnione do momentu rozmycia przez użytkownika pola 1, ale nie polega na globalnym odpytywaniu, więc IMO jest lepszym rozwiązaniem.
To powiedziawszy, ponieważ naciśnięcie klawisza Enter może wysłać formularz, możesz również potrzebować odpowiedniego programu obsługi dla naciśnięcia klawisza.
Alternatywnie możesz użyć globalnego odpytywania, aby sprawdzić $ (': - webkit-autofill')
źródło
Z mojego osobistego doświadczenia wynika, że poniższy kod działa dobrze z Firefoxem IE i Safari, ale nie działa zbyt dobrze przy wybieraniu autouzupełniania w Chrome.
Poniższy kod działa lepiej, ponieważ będzie się uruchamiał za każdym razem, gdy użytkownik kliknie pole wejściowe i stamtąd możesz sprawdzić, czy pole jest puste, czy nie.
źródło
Udało mi się na chrome z:
źródło
Moje rozwiązanie to:
źródło
Po przeprowadzeniu badań problem polega na tym, że przeglądarki Webkit nie uruchamiają zdarzenia zmiany podczas autouzupełniania. Moim rozwiązaniem było samodzielne pobranie klasy autouzupełniania, którą dodaje webkit i wyzwolenie zdarzenia zmiany.
Oto link do problemu z chromem. https://bugs.chromium.org/p/chromium/issues/detail?id=636425
źródło
Na przykład, aby wykryć e-mail, próbowałem „przy zmianie” i obserwatora mutacji, ale żaden z nich nie działał. setInterval działa dobrze z automatycznym wypełnianiem LinkedIn (nie ujawnia całego mojego kodu, ale masz pomysł) i działa dobrze z zapleczem, jeśli dodasz tutaj dodatkowe warunki, aby spowolnić AJAX. A jeśli nie ma zmiany w polu formularza, na przykład nie piszą, aby edytować swój e-mail, lastEmail zapobiega bezcelowym pingom AJAX.
źródło
Trudno mi było wykryć automatyczne wypełnianie w przeglądarce Firefox. To jedyne rozwiązanie, które u mnie zadziałało:
Próbny
HTML:
CSS:
JavaScript:
W przypadku Chrome używam:
if ($(this).css('animation-name') == 'onAutoFillStart')
W przeglądarce Firefox:
if ($(this).val() != '')
źródło
spróbuj w CSS
input:-webkit-autofill { border-color: #9B9FC4 !important; }
źródło