Występują problemy z zachowaniem autouzupełniania chrome w kilku formularzach.
Wszystkie pola w formularzu mają bardzo popularne i dokładne nazwy, takie jak „e-mail”, „nazwa” lub „hasło”, a także zostały autocomplete="off"
ustawione.
Flaga autouzupełniania skutecznie wyłączyła zachowanie autouzupełniania, w którym po rozpoczęciu pisania pojawia się lista wartości, ale nie zmieniła wartości, które Chrome automatycznie wypełnia pola.
Takie zachowanie byłoby w porządku, gdyby chrom nieprawidłowo wypełniał dane wejściowe, na przykład wypełniał dane telefonu adresem e-mail. Klienci narzekali na to, więc potwierdzono, że dzieje się to w wielu przypadkach, a nie jako jakiś wynik czegoś, co zrobiłem lokalnie na moim komputerze.
Jedynym bieżącym rozwiązaniem, jakie mogę wymyślić, jest dynamiczne generowanie niestandardowych nazw wejściowych, a następnie wyodrębnianie wartości z zaplecza, ale wydaje się to dość hackerskim rozwiązaniem tego problemu. Czy są jakieś tagi lub dziwactwa, które zmieniają zachowanie autouzupełniania, które mogłyby zostać użyte do rozwiązania tego problemu?
źródło
Odpowiedzi:
W przypadku nowych wersji Chrome wystarczy wpisać
autocomplete="new-password"
pole hasła i to wszystko. Sprawdziłem to, działa dobrze.Dostałem tę wskazówkę od programisty Chrome w tej dyskusji: https://bugs.chromium.org/p/chromium/issues/detail?id=370363#c7
PS Pamiętaj, że Chrome będzie próbował wywnioskować zachowanie autouzupełniania na podstawie nazwy, identyfikatora i dowolnej treści tekstowej, którą może otoczyć pole, w tym etykiet i dowolnych węzłów tekstowych. Jeśli istnieje token autouzupełniania, taki jak
street-address
w kontekście, Chrome automatycznie go wypełni. Heurystyka może być dość myląca, ponieważ czasami uruchamia się tylko wtedy, gdy w formularzu są dodatkowe pola, lub nie, jeśli w formularzu jest za mało pól. Zauważ też, żeautocomplete="no"
wydaje się działać, aleautocomplete="off"
nie z powodów historycznych.autocomplete="no"
czy mówisz przeglądarce, że to pole powinno być automatycznie uzupełniane jako pole o nazwie"no"
. Jeśli wygenerujesz unikalne losoweautocomplete
nazwy, wyłącz autouzupełnianie.Jeśli użytkownicy odwiedzili złe formularze, informacje o autouzupełnianiu mogą być uszkodzone . Konieczne jest ich ręczne wpisanie i poprawienie informacji o autouzupełnianiu w Chrome.
źródło
Właśnie odkryłem, że jeśli pamiętasz nazwę użytkownika i hasło do witryny, bieżąca wersja Chrome automatycznie wypełni Twoją nazwę użytkownika / adres e-mail w polu przed dowolnym
type=password
polem. Nie ma znaczenia, jak nazywa się to pole - po prostu zakłada to pole, zanim hasło stanie się Twoją nazwą użytkownika.Stare rozwiązanie
Wystarczy użyć
<form autocomplete="off">
i zapobiega to wpisywaniu hasła, a także heurystycznemu wypełnianiu pól w oparciu o założenia przeglądarki (które często są błędne). W przeciwieństwie do używania,<input autocomplete="off">
które wydaje się być prawie ignorowane przez autouzupełnianie hasła (w Chrome to znaczy Firefox go wypełnia).Zaktualizowane rozwiązanie
Chrome teraz ignoruje
<form autocomplete="off">
. Dlatego moje oryginalne obejście (które usunąłem) jest teraz modne.Wystarczy utworzyć kilka pól i ukryć je za pomocą „display: none”. Przykład:
Następnie umieść pod sobą swoje prawdziwe pola.
Pamiętaj, aby dodać komentarz lub inne osoby w twoim zespole będą się zastanawiać, co robisz!
Aktualizacja z marca 2016 r
Właśnie przetestowane z najnowszym Chrome - wszystko dobrze. To dość stara odpowiedź, ale chcę tylko wspomnieć, że nasz zespół stosuje ją od lat w dziesiątkach projektów. Nadal działa świetnie, pomimo kilku poniższych komentarzy. Nie ma problemów z dostępnością, ponieważ pola
display:none
oznaczają, że nie są one aktywne. Jak wspomniałem, musisz postawić je przed swoimi prawdziwymi polami.Jeśli używasz javascript do modyfikowania formularza, będziesz potrzebować dodatkowej sztuczki. Pokaż fałszywe pola podczas manipulowania formularzem, a następnie ukryj je ponownie milisekundę później.
Przykładowy kod wykorzystujący jQuery (zakładając, że nadajesz fałszywym polom klasę):
Zaktualizuj lipiec 2018 r
Moje rozwiązanie nie działa już tak dobrze, ponieważ eksperci od Chrome w zakresie przeciwdziałania usability ciężko pracowali. Ale rzucili nam kość w postaci:
To działa i głównie rozwiązuje problem.
Jednak to nie działa, gdy nie masz pola hasła, a tylko adres e-mail. Może to być również trudne, aby przestał żółknąć i napełniał się. Aby to naprawić, można użyć rozwiązania fałszywych pól.
W rzeczywistości czasami musisz wpaść w dwie partie fałszywych pól i wypróbować je w różnych miejscach. Na przykład miałem już fałszywe pola na początku formularza, ale Chrome niedawno zaczął ponownie wypełniać moje pole „E-mail” - więc wtedy podwoiłem liczbę i wstawiłem więcej fałszywych pól tuż przed polem „E-mail”, i to naprawiło . Usunięcie pierwszej lub drugiej partii pól powoduje powrót do nieprawidłowego nadgorliwego autouzupełniania.
Aktualizacja z marca 2020 r
Nie jest jasne, czy i kiedy to rozwiązanie nadal działa. Wydaje się, że wciąż działa, ale nie cały czas.
W komentarzach poniżej znajdziesz kilka wskazówek. Jeden dodany właśnie przez @anilyeni może być wart dalszego zbadania:
Jak zauważyłem,
autocomplete="off"
działa na Chrome 80, JEŚLI jest mniej niż 3 elementy<form>
. Nie wiem, jaka jest logika ani gdzie jest związana z nią dokumentacja.Również ten z @dubrox może być odpowiedni, chociaż go nie testowałem:
wielkie dzięki za podstęp, ale proszę zaktualizuj odpowiedź, ponieważ
display:none;
już nie działa, aleposition: fixed;top:-100px;left:-100px; width:5px;
działa :)Zaktualizuj KWIECIEŃ 2020
Specjalną wartością dla chrome dla tego atrybutu jest wykonywanie pracy: (testowane na wejściu - ale nie przeze mnie)
autocomplete="chrome-off"
źródło
autocomplete="I told you I wanted this off, Google. But you would not listen."
Po miesiącach i miesiącach walki odkryłem, że rozwiązanie jest o wiele prostsze, niż można sobie wyobrazić:
Zamiast
autocomplete="off"
użyciaautocomplete="false"
;)To takie proste i działa jak urok w Google Chrome!
Aktualizacja z sierpnia 2019 r. (Kredyt na @JonEdiger w komentarzach)
Uwaga: wiele informacji w Internecie mówi, że przeglądarki traktują teraz autouzupełnianie = „fałsz” tak samo, jak autouzupełnianie = „wyłączone”. Przynajmniej od tej chwili uniemożliwia autouzupełnianie dla tych trzech przeglądarek.
Ustaw na poziomie formularza, a następnie dla danych wejściowych, które chcesz wyłączyć, ustaw niepoprawną wartość, np. „None”:
źródło
Czasami nawet
autocomplete=off
nie zapobiegnie wypełnieniu poświadczeń w niewłaściwych polach.Obejściem tego problemu jest wyłączenie autouzupełniania przeglądarki za pomocą trybu tylko do odczytu i ustawienie fokusu do zapisu:
focus
Zdarzenie przy kliknięć myszką i tabbing przez pola.Aktualizacja:
Mobile Safari ustawia kursor w polu, ale nie pokazuje wirtualnej klawiatury. To nowe obejście działa jak poprzednio, ale obsługuje wirtualną klawiaturę:
Demo na żywo https://jsfiddle.net/danielsuess/n0scguv6/
// UpdateEnd
Objaśnienie: Przeglądarka automatycznie wypełnia poświadczenia w niewłaściwym polu tekstowym?
Czasami zauważam to dziwne zachowanie w Chrome i Safari, gdy pola hasła są w tej samej formie. Myślę, że przeglądarka szuka pola hasła, aby wstawić zapisane poświadczenia. Następnie automatycznie uzupełnia nazwę użytkownika do najbliższego pola tekstowego, które pojawia się przed polem hasła w DOM (zgaduję z powodu obserwacji). Ponieważ przeglądarka jest ostatnią instancją i nie można jej kontrolować,
Ta poprawka tylko do odczytu działała dla mnie.
źródło
dummy
a następnie ponownie ją usunąć? Dodawanie i usuwanie tylko do odczytu brzmi jak niebezpieczny ruch - co jeśli przeglądarka nie chce, abyś się na nim skupił?Jeśli implementujesz funkcję pola wyszukiwania, spróbuj ustawić
type
atrybutsearch
w następujący sposób:Działa to dla mnie w Chrome v48 i wydaje się być uzasadnionym znacznikiem:
https://www.w3.org/wiki/HTML/Elements/input/search
źródło
Spróbuj tego. Wiem, że pytanie jest nieco stare, ale jest to inne podejście do problemu.
Zauważyłem też, że problem pojawia się tuż nad
password
boiskiem.Próbowałem obu metod, takich jak
<form autocomplete="off">
a<input autocomplete="off">
jednak żaden z nich nie pracował dla mnie.Naprawiłem to za pomocą poniższego fragmentu - właśnie dodałem kolejne pole tekstowe tuż nad polem typu hasła i zrobiłem to
display:none
.Coś takiego:
Mam nadzieję, że to komuś pomoże.
źródło
password
i miećactual_password
prawidłowe pole, ponieważ Google wydaje się teraz patrzeć naname
. Oznacza to jednak, że Chrome nie zapisze hasła, a tego właśnie potrzebuję . AAAAARRRRGHH!Nie wiem dlaczego, ale pomogło mi to i zadziałało.
Nie mam pojęcia dlaczego, ale autocompelete = "nowe hasło" wyłącza automatyczne wypełnianie. Działa w najnowszej wersji chromowanej 49.0.2623.112 .
źródło
Dla mnie proste
Zrobiłem to
Testowany na wielu wersjach, ostatnia próba miała miejsce 56.0.2924.87
źródło
Musisz dodać ten atrybut:
Link do źródła: pełny artykuł
źródło
To takie proste i trudne :)
Google Chrome w zasadzie szukać każdego pierwszego widocznego elementu hasłem znajdującym się wewnątrz
<form>
,<body>
a<iframe>
znaczniki, aby włączyć automatyczne uzupełnianie dla nich, tak aby wyłączyć tego trzeba dodać element hasło obojętne jak następuje:jeśli element hasła wewnątrz
<form>
tagu, należy umieścić element fikcyjny jako pierwszy element w formularzu natychmiast po<form>
otwarciu tagujeśli elementu hasła nie ma w
<form>
znaczniku, umieść element zastępczy jako pierwszy element na stronie HTML natychmiast po<body>
otwarciu znacznikaMusisz ukryć element fikcyjny bez użycia css,
display:none
więc w zasadzie użyj następującego elementu jako fikcyjnego hasła.źródło
<form *ngIf="!loggedIn()" #loginForm="ngForm" class="navbar-form navbar-right" (ngSubmit)="login()"><input type="password" style="width: 0;height: 0; visibility: hidden;position:absolute;left:0;top:0;"/><input type="text" #username="ngModel" placeholder="Username" class="form-control" required autocomplete="off" name="username" [(ngModel)]="model.username"><input type="password" #password="ngModel" placeholder="Password" class="form-control" required autocomplete="off" name="password" [(ngModel)]="model.password">...
Oto moje proponowane rozwiązania, ponieważ Google nalega na zastąpienie każdego obejścia, które ludzie wydają się robić.
Opcja 1 - zaznacz cały tekst po kliknięciu
Ustaw wartości danych wejściowych na przykład dla użytkownika (np.
[email protected]
) Lub etykietę pola (np.Email
) I dodaj klasę wywoływanąfocus-select
do danych wejściowych:A oto jQuery:
Naprawdę nie widzę, żeby Chrome kiedykolwiek bałaganił wartości. To byłoby szalone. Mamy nadzieję, że jest to bezpieczne rozwiązanie.
Opcja 2 - ustaw wartość e-maila na spację, a następnie usuń go
Zakładając, że masz dwa dane wejściowe, takie jak adres e-mail i hasło, ustaw wartość pola wiadomości e-mail na
" "
(spację) i dodaj atrybut / wartośćautocomplete="off"
, a następnie wyczyść to za pomocą JavaScript. Możesz pozostawić wartość hasła pustą.Jeśli z jakiegoś powodu użytkownik nie ma JavaScript, upewnij się, że przycinasz jego wejście po stronie serwera (prawdopodobnie tak powinno być), na wypadek, gdyby nie usunął spacji.
Oto jQuery:
Ustawiłem limit czasu,
15
ponieważ5
wydawało mi się, że czasami działa w moich testach, więc potrojenie tej liczby wydaje się bezpiecznym zakładem.Brak ustawienia wartości początkowej na spację powoduje, że Chrome pozostawia dane wejściowe w kolorze żółtym, tak jakby automatycznie je wypełniły.
Opcja 3 - ukryte dane wejściowe
Umieść to na początku formularza:
CSS:
Pamiętaj, aby zachować notatkę HTML, aby inni programiści jej nie usuwali! Upewnij się także, że nazwa ukrytego wejścia jest odpowiednia.
źródło
Użyj css text-security: disc bez użycia type = password .
HTML
css
źródło
W niektórych przypadkach przeglądarka będzie sugerować wartości autouzupełniania, nawet jeśli atrybut autouzupełniania jest wyłączony. To nieoczekiwane zachowanie może być dość zagadkowe dla programistów. Sztuką naprawdę wymuszającą brak autouzupełniania jest przypisanie losowego ciągu do atrybutu , na przykład:
źródło
Odkryłem, że dodanie tego do formularza uniemożliwia Chrome korzystanie z autouzupełniania.
Znaleziono tutaj. https://code.google.com/p/chromium/issues/detail?id=468153#hc41
Naprawdę rozczarowujące, że Chrome zdecydował, że wie lepiej niż programista o tym, kiedy wykonać autouzupełnianie. Ma prawdziwy Microsoft.
źródło
dodanie atrybutu readonly do tagu oraz usunięcie zdarzenia onfocus rozwiązuje problem
źródło
W przypadku kombinacji hasła do nazwy użytkownika jest to łatwy problem do rozwiązania. Heurystyka Chrome szuka wzoru:
śledzony przez:
Po prostu przerwij ten proces, unieważniając to:
źródło
Mike Nelsons podał, że rozwiązanie nie działa dla mnie w Chrome 50.0.2661.102 m. Po prostu dodanie elementu wejściowego tego samego typu z wyświetlaczem: żaden zestaw nie wyłącza już autouzupełniania natywnej przeglądarki. Konieczne jest teraz skopiowanie atrybutu nazwy pola wejściowego, na którym chcesz wyłączyć automatyczne uzupełnianie.
Ponadto, aby uniknąć duplikowania pola wejściowego, gdy znajdują się one w elemencie formularza, należy umieścić wyłączony element, który nie jest wyświetlany. Zapobiegnie to przesłaniu tego elementu w ramach akcji formularza.
źródło
W 2016 roku Google Chrome zaczął ignorować,
autocomplete=off
chociaż jest w W3C. Odpowiedź, którą opublikowali :Co zasadniczo mówi: wiemy lepiej, czego chce użytkownik.
Otworzyli kolejny błąd, aby opublikować prawidłowe przypadki użycia, gdy wymagane jest autouzupełnianie = wyłączone
Nie widziałem problemów związanych z autouzupełnianiem w całej mojej aplikacji B2B, ale tylko z wprowadzeniem typu hasła.
Autouzupełnianie wkracza, jeśli na ekranie jest jakieś pole hasła, nawet ukryte. Aby złamać tę logikę, możesz umieścić każde pole hasła we własnej formie, jeśli nie złamie ono logiki strony.
źródło
autocomplete="pineapple"
lub jakiś bełkot również rozwiązuje problem? Przynajmniej tak się stało po mojej stronie!Jeśli masz problemy z zachowaniem symboli zastępczych, ale wyłączasz automatyczne uzupełnianie chrome, znalazłem to obejście.
Problem
HTML
http://jsfiddle.net/xmbvwfs6/1/
Powyższy przykład nadal powoduje problem z autouzupełnianiem, ale jeśli używasz
required="required"
CSS i trochę CSS, możesz replikować symbole zastępcze, a Chrome nie odbierze tagów.Rozwiązanie
HTML
CSS
http://jsfiddle.net/mwshpx1o/1/
źródło
input
fokus, jeśli użytkownik kliknie „fałszywy” symbol zastępczy:$("label").on("click",function(){ $(this).prev().focus(); });
Pamiętaj, żelabel
nie może być wcześniej niżinput
... Chrome go znajdzie! Ładne kreatywne rozwiązanie! +1Naprawdę nie podobało mi się tworzenie ukrytych pól, myślę, że zrobienie tego w ten sposób bardzo szybko się zagmatwa.
W polach wejściowych, które chcesz zatrzymać od automatycznego uzupełniania, zadziała. Spraw, aby pola były tylko do odczytu, a fokus usuń ten atrybut w ten sposób
wystarczy to, że najpierw usuniesz atrybut „tylko do odczytu” , wybierając pole, a wtedy najprawdopodobniej zapełnisz się danymi wprowadzonymi przez użytkownika i pochylisz się nad autouzupełnianiem, aby przejąć kontrolę
źródło
Wcześniej wprowadzone wartości buforowane przez chrome są wyświetlane jako rozwijana lista wyboru. Można to wyłączyć przez autouzupełnianie = wyłączone, jawnie zapisany adres w zaawansowanych ustawieniach chrome daje wyskakujące okienko autouzupełniania, gdy pole adresu staje się aktywne. Można to wyłączyć przez autocomplete = "false" . Ale pozwoli to Chrome wyświetlać wartości buforowane w menu rozwijanym.
W wejściowym polu HTML następujący znak wyłączy oba.
Role="presentation" & autocomplete="off"
Podczas wybierania pól wejściowych do autouzupełniania adresu Chrome ignoruje te pola wejściowe, które nie mają poprzedzającego elementu HTML.
Aby upewnić się, że parser chrome ignoruje pole wprowadzania wyskakującego adresu autouzupełniania, między etykietą a polem tekstowym można dodać ukryty przycisk lub kontrolę obrazu. Spowoduje to przerwanie sekwencji analizowania chromu podczas tworzenia pary etykiet-danych wejściowych do automatycznego wypełniania. Pola wyboru są ignorowane podczas analizowania pól adresu
Chrome bierze również pod uwagę atrybut „for” na elemencie etykiety. Można go użyć do przerwania sekwencji analizowania chromu.
źródło
Ponieważ wszyscy mamy ten problem, poświęciłem trochę czasu na napisanie działającego rozszerzenia jQuery dla tego problemu. Google musi przestrzegać znaczników HTML, a nie Google
Po prostu dodaj to do pliku takiego jak /js/jquery.extends.js i dołącz do jQuery. Zastosuj go do każdego elementu formularza przy ładowaniu dokumentu w następujący sposób:
jsfiddle z testami
źródło
Wypróbuj następujący
jQuery
kod, który dla mnie zadziałał.źródło
autocomplete="off"
do pola wejściowego zamiast używać jquery. A tak przy okazji, to nie działa. Sugestie dotyczące hasła do Chrome wciąż się wyświetlają.Są w tym dwa elementy. Chrome i inne przeglądarki zapamiętują wcześniej wprowadzone wartości nazw pól i na tej podstawie udostępniają użytkownikowi listę autouzupełniania (w szczególności dane typu hasła nigdy nie są zapamiętywane w ten sposób, z dość oczywistych powodów). Możesz dodać
autocomplete="off"
aby temu zapobiec na przykład w polu e-mail.Masz jednak wypełniacze hasła. Większość przeglądarek ma swoje wbudowane implementacje, a także wiele narzędzi innych firm, które zapewniają tę funkcjonalność. To ty nie możesz przestać. Jest to użytkownik, który sam decyduje o zapisaniu tych informacji w celu ich późniejszego automatycznego wypełnienia, i jest to całkowicie poza zakresem i zakresem wpływu Twojej aplikacji.
źródło
autocomplete="off"
. Jest to możliwe, intencją jest, aby go usunąć, ale to nie zawsze wyraźnie zaznaczono, a tam na pewno nic nie wymagając ten skok psychiczne. Mogą po prostu chcieć rozważyć alternatywne lub lepsze sposoby leczenia. Niezależnie od tego, jest to nadal część specyfikacji, i ponownie, nie ma też oznak, że będzie ona opuszczać specyfikację. I nadal działa we wszystkich przeglądarkach, o ile mi wiadomo, w tym w Chrome.Zgodnie z raportem o błędzie Chromium # 352347 Chrome już nie szanuje
autocomplete="off|false|anythingelse"
ani formularzy, ani danych wejściowych.Jedynym rozwiązaniem, które działało dla mnie, było dodanie fikcyjnego pola hasła :
źródło
Ustawiając,
autocomplete
abyoff
działało tutaj, mam przykład, który jest używany przez Google na stronie wyszukiwania. Znalazłem to z elementu inspekcji.edycja : Jeśli
off
nie działa, spróbujfalse
lubnofill
. W moim przypadku działa z wersją chrome 48.0źródło
Oto brudny hack -
Masz tutaj swój element (dodając atrybut disabled):
A potem na dole strony umieść JavaScript:
źródło
Inne rozwiązanie oparte na pakiecie internetowym. Jak już wspomniano, za każdym razem, gdy Chrome znajdzie pole hasła, automatycznie uzupełnia wiadomość e-mail. AFAIK, to niezależnie od autouzupełniania = [cokolwiek].
Aby obejść tę zmianę, zmień typ wprowadzania na tekst i zastosuj czcionkę zabezpieczającą Webkit w dowolnej formie.
Z tego, co widzę, jest to co najmniej tak bezpieczne, jak typ danych wejściowych = hasło, to bezpieczne kopiowanie i wklejanie. Jest jednak podatny na ataki poprzez usunięcie stylu, który usunie gwiazdki, oczywiście typ wejściowy = hasło można łatwo zmienić na typ wejściowy = tekst w konsoli, aby odsłonić automatycznie wypełnione hasła, więc tak naprawdę jest tak samo.
źródło
type="password"
.Jedyny sposób, który działa dla mnie to: (wymagane jQuery)
źródło
Napotkałem ten sam problem. A oto rozwiązanie do wyłączania automatycznego wypełniania nazwy użytkownika i hasła w Chrome (tylko przetestowane tylko z Chrome)
źródło