Jak wyłączyć Autouzupełnianie przeglądarki w polu formularza internetowego / znaczniku wejściowym?

Oprócz autocomplete=off, nazwy pól formularza mogą być również losowe przez kod generujący Stronę, być może poprzez dodanie na końcu nazw jakiegoś ciągu specyficznego dla sesji.

Po przesłaniu formularza możesz usunąć tę część przed przetworzeniem jej po stronie serwera. Uniemożliwiłoby to przeglądarce internetowej znalezienie kontekstu dla pola, a także mogłoby zapobiec atakom XSRF, ponieważ atakujący nie byłby w stanie odgadnąć nazw pól dla formularza Uległość.

Większość głównych przeglądarek i menedżerów haseł (poprawnie, IMHO) ignoruje teraz autocomplete=off.

Dawno temu większość menedżerów haseł zaczęła ignorować autocomplete=off, a teraz przeglądarki zaczynają aby zrobić to samo tylko dla wprowadzania nazwy użytkownika/hasła.

Niestety, błędy w implementacjach autouzupełniania wstawiają nazwę użytkownika i/lub hasło do nieodpowiednich pól formularza, powodując błędy walidacji formularza, lub co gorsza, przypadkowo wstawiając nazwy użytkowników do pól, które zostały celowo pozostawione puste przez użytkownika.

Co robi Web developer?

• jeśli można zachować wszystkie pola hasła na stronie samodzielnie, to świetny początek, ponieważ wydaje się, że obecność pola hasła jest głównym wyzwalaczem autouzupełniania użytkownika/przejścia, aby rozpocząć. W przeciwnym razie przeczytaj poniższe wskazówki.
• Safari zauważa, że istnieją 2 pola haseł i wyłącza autouzupełnianie w tym przypadku, zakładając, że musi to być formularz zmiany hasła, a nie formularz logowania. Dlatego pamiętaj, aby użyć 2 pól hasła (nowe i potwierdź nowe) dla dowolnych formularzy, w których zezwalasz]}

• Chrome 34, niestety, będzie próbował autouzupełniać pola za pomocą user / pass, gdy tylko zobaczy pole hasła. Jest to dość zły błąd, który miejmy nadzieję, że zmienią zachowanie Safari. Jednak dodanie tego do góry formularza wydaje się wyłączać autouzupełnianie hasła:

  <input type="text" style="display:none">
  <input type="password" style="display:none">
  

Nie zbadałem jeszcze dokładnie IE lub Firefoksa, ale chętnie zaktualizuję odpowiedź, jeśli inni mają info w komentarzach.

Czasami nawet autocomplete=off nie uniemożliwia wypełnienia w poświadczeniach w niewłaściwych polach, ale nie w polu user lub nick.

To obejście jest uzupełnieniem postu apinsteina na temat zachowania przeglądarki.

Poprawiono automatyczne wypełnianie przeglądarki w trybie tylko do odczytu i ustawiono opcję zapisu na ostrości (Kliknij I zakładkę)

 <input type="password" readonly  
     onfocus="this.removeAttribute('readonly');"/>

Update: Mobile Safari ustawia kursor w polu, ale nie pokazuje wirtualnej klawiatury. Nowa poprawka działa jak wcześniej, ale obsługuje wirtualne Klawiatura:

<input id="email" readonly type="email" onfocus="if (this.hasAttribute('readonly')) {
    this.removeAttribute('readonly');
    // fix for mobile safari to show virtual keyboard
    this.blur();    this.focus();  }" />

Live Demo https://jsfiddle.net/danielsuess/n0scguv6/

/ / UpdateEnd

Ponieważ przeglądarka automatycznie wypełnia poświadczenia do niewłaściwego pola tekstowego!?

Zauważyłem to dziwne zachowanie na Chrome i Safari, gdy w w tym samym formularzu znajdują się pola haseł. myślę, że przeglądarka szuka pola hasła, aby wstawić zapisane poświadczenia. Następnie automatycznie wypełnia (tylko zgadując ze względu na obserwację) najbliższe pole tekstowe, które pojawia się przed polem hasło w DOM. Ponieważ przeglądarka jest ostatnią instancją i nie można jej kontrolować,

Powyższa poprawka do odczytu zadziałała dla mnie.

<form name="form1" id="form1" method="post" 
      autocomplete="off" action="http://www.example.com/form.cgi">

To będzie działać w Internet Explorer i Mozilla FireFox, minusem jest to, że nie jest to standard XHTML.

Rozwiązaniem dla Chrome jest dodanie autocomplete="new-password" do hasła typu wejściowego.

Przykład:

<form name="myForm"" method="post">
<input name="user" type="text" />
<input name="pass" type="password" autocomplete="new-password" />
<input type="submit">
</form>

Chrome zawsze automatycznie uzupełnia dane, jeśli znajdzie pole wpisz hasło , wystarczy, aby wskazać dla tego pola autocomplete = "new-password".

To mi pasuje.

Uwaga: Upewnij się z F12, że zmiany wejdą w życie, wiele razy przeglądarki zapisują stronę w pamięci podręcznej, to dało mi złe wrażenie, że nie działa, ale przeglądarka nie przyniosła zmiany.

Jak mówili inni, odpowiedź brzmi autocomplete="off"

Jednak myślę, że warto powiedzieć Dlaczego dobrze jest użyć tego w pewnych przypadkach, ponieważ niektóre odpowiedzi na to i duplikat pytania sugerują, że lepiej go nie wyłączać.

Zatrzymywanie przeglądarek przechowujących numery kart kredytowych nie powinno być pozostawiane użytkownikom. Zbyt wielu użytkowników nawet nie zda sobie sprawy, że to problem.

Szczególnie ważne jest, aby wyłączyć go na polach dla kodów bezpieczeństwa kart kredytowych. Jako ta strona stwierdza:

"Nigdy nie przechowuj kodu zabezpieczającego ... jej wartość zależy od domniemania, że jedynym sposobem jej dostarczenia jest odczytanie jej z fizycznej karty kredytowej, dowodząc, że osoba dostarczająca ją faktycznie posiada kartę."

Będę musiał się różnić odpowiedziami, które mówią, aby uniknąć wyłączania autouzupełniania.

Pierwszą rzeczą do poruszenia jest to, że automatyczne wypełnianie nie jest wyraźnie wyłączone w polach formularza logowania, to awaria PCI-DSS. Ponadto, jeśli komputer lokalny użytkownika zostanie naruszony, wszelkie dane autouzupełniania mogą być trywialnie uzyskane przez atakującego ze względu na to, że są przechowywane w clear.

Z pewnością jest argument za użytecznością, jednak istnieje bardzo dobra równowaga, jeśli chodzi o które pola formularza powinny mieć wyłączone autouzupełnianie, a które nie.

Trzy opcje: Pierwszy:

<input type='text' autocomplete='off' />

Drugi:

<form action='' autocomplete='off'>

Trzeci (kod javascript):

$('input').attr('autocomplete', 'off');

Wystarczy ustawić autocomplete="off". Jest ku temu bardzo dobry powód: chcesz zapewnić własną funkcję autouzupełniania!

Próbowałem niekończących się rozwiązań, a potem znalazłem to:

Zamiast autocomplete="off" wystarczy użyć autocomplete="false"

Tak proste, i to działa jak urok w Google Chrome, jak również!

Na pokrewnej, a właściwie zupełnie przeciwnej nucie -

"Jeśli jesteś użytkownikiem wyżej wymienionego formularza i chcesz ponownie włączyć funkcja autouzupełniania, użyj "Zapamiętaj hasło" bookmarklet z tej bookmarklet Strona . Usuwa wszystkie atrybuty autocomplete="off" ze wszystkich formularzy na stronie. Zostawić walka dobra!"

Rzeczywiście użyliśmy sasb 'S pomysł na jedną stronę. To była aplikacja internetowa oprogramowania medycznego do prowadzenia gabinetu lekarskiego. Jednak wielu naszych klientów było chirurgami, którzy korzystali z wielu różnych stacji roboczych, w tym terminali półpublicznych. Chcieli się więc upewnić, że lekarz, który nie rozumie konsekwencji automatycznie zapisanych haseł lub nie zwraca uwagi, nie może przypadkowo zostawić łatwo dostępnych danych logowania. Oczywiście, to było przed pomysłem prywatnego przeglądania, które jest zaczyna być opisywany w IE8, FF3.1, itd. Mimo to wielu lekarzy jest zmuszonych do korzystania ze starych przeglądarek szkolnych w szpitalach, które nie ulegną zmianie.

Więc mieliśmy stronę logowania generować losowe nazwy pól, które będą działać tylko dla tego postu. Tak, jest to mniej wygodne, ale po prostu uderza użytkownika w głowę, aby nie przechowywać informacji logowania na publicznych terminalach.

Myślę, że {[0] } jest wspierany w HTML 5.

Zadaj sobie pytanie, dlaczego chcesz to zrobić-może to mieć sens w niektórych sytuacjach, ale nie rób tego tylko ze względu na robienie tego.

Jest mniej wygodny dla użytkowników, a nawet nie ma problemu z bezpieczeństwem w OS X (wspomniany Poniżej przez Sorena). Jeśli martwisz się, że ludzie zdalnie kradną ich hasła , rejestrator naciśnięć klawiszy może to zrobić, nawet jeśli Twoja aplikacja używa autcomplete=off.

Jako użytkownik, który zdecyduje się na przeglądarkę zapamiętuje (większość) moich informacji, uznałbym to za denerwujące, gdyby Twoja strona nie pamiętała mojej.

Żadne z rozwiązań nie zadziałało na mnie w tej rozmowie.

W końcu wymyśliłem czyste rozwiązanie HTML, które wymaga nie Javascript, działa w nowoczesnych przeglądarkach (poza IE; tam musiał co najmniej 1 złapać, prawda?) i nie wymaga wyłączania autouzupełniania całego formularza.

Po prostu wyłącz autouzupełnianie na form, a następnie włącz ją dla dowolnego input, które chcesz, aby działało w formularzu. Na przykład:

<form autocomplete="off">
    <!-- these inputs will not allow autocomplete and chrome 
         won't highlight them yellow! -->
    <input name="username"  />
    <input name="password" type="password" />
    <!-- this field will allow autocomplete to work even 
         though we've disabled it on the form -->
    <input name="another_field" autocomplete="on" />
</form>

Był niestandardowy sposób, aby to zrobić (myślę, że Mozilla i Internet Explorer nadal go wspierać), ale mieszanie się z oczekiwaniami użytkowników jest złym pomysłem.

Jeśli użytkownik wprowadzi dane swojej karty kredytowej w formularzu, a potem Niech ktoś inny użyje tej przeglądarki, to nie twoja sprawa. :)

To mi pasuje.

<input name="pass" type="password" autocomplete="new-password" />

Możemy również użyć tej strategii w innych kontrolkach, takich jak text, select itp

Dodanie

autocomplete="off"

Do znacznika formularza spowoduje wyłączenie autouzupełniania przeglądarki (wcześniej wpisanego do tego pola) ze wszystkich pól input w tym konkretnym formularzu.

Testowane na:

• Firefox 3.5, 4 BETA
• Internet Explorer 8
• Chrome

Aby uniknąć nieprawidłowego XHTML można ustawić ten atrybut za pomocą javascript. Przykład użycia jQuery:

<input type="text" class="noAutoComplete" ... />

$(function() {
    $('.noAutoComplete').attr('autocomplete', 'off');
});

Problem polega na tym, że użytkownicy bez javascript otrzymają funkcję autouzupełniania.

Dodanie autocomplete="off" nie da rady.

Zmień atrybut typu wejścia na type="search".
Google nie stosuje automatycznego wypełniania do wpisów z typem wyszukiwania.

Trochę za późno na mecz...ale właśnie natknąłem się na ten problem i próbowałem kilku błędów, ale ten działa dla mnie znaleziony na MDN

W niektórych przypadkach przeglądarka będzie nadal sugerować wartości autocompletion nawet jeśli atrybut autouzupełnianie jest ustawiony na off. This unexpected zachowanie może być dość zastanawiające dla programistów. The trick to really wymusić brak dopełnienia to przypisanie losowego ciągu do atrybutu tak:

autocomplete="nope"

Używa niestandardowej nazwy i id dla pól, więc zamiast" name " mają "name_". Przeglądarki nie będą wtedy widzieć pola nazwy. Najlepsze w tym jest to, że możesz to zrobić do niektórych, ale nie wszystkich pól i będzie to autouzupełnianie niektórych, ale nie wszystkich pól.

Spróbuj też jeśli tylko autocomplete="off" nie działa:

autocorrect="off" autocapitalize="off" autocomplete="off"

Nie mogę uwierzyć, że to nadal problem tak długo po tym, jak to zgłoszono. Powyższe rozwiązania nie działały dla mnie, ponieważ safari zdawało się wiedzieć, kiedy element nie był wyświetlany lub poza ekranem, jednak poniższe działania działały dla mnie: {]}

<div style="height:0px; overflow:hidden; ">
  Username <input type="text" name="fake_safari_username" >
  Password <input type="password" name="fake_safari_password">
</div>

Jest to problem bezpieczeństwa, który przeglądarki ignorują teraz. Przeglądarki identyfikują i przechowują zawartość za pomocą nazw wejściowych, nawet jeśli deweloperzy uważają, że informacje są poufne i nie powinny być przechowywane. Zmiana nazwy wejścia pomiędzy dwoma żądaniami rozwiąże problem (ale nadal będzie zapisana w pamięci podręcznej przeglądarki, a także zwiększy pamięć podręczną przeglądarki). Poproszenie użytkownika o aktywację lub dezaktywację opcji w ustawieniach przeglądarki nie jest dobrym rozwiązaniem. Problem można rozwiązać w backend.

<? $r = rmd5(rand().mocrotime(TRUE)); ?>
<form method="POST" action="./">
    <input type="text" name="<? echo $r; ?>" />
    <input type="hidden" name="__autocomplete_fix_<? echo $r; ?>" value="username" />
    <input type="submit" name="submit" value="submit" />
</form>

Serwer następnie przetwarza zmienne post w następujący sposób:

foreach ($_POST as $key => $val)
{
    if(preg_match('#^__autocomplete_fix_#', $key) === 1){
        $n = substr($key, 19);
        if(isset($_POST[$n]))$_POST[$val] = $_POST[$n];
    }
}

Wartość można uzyskać jak zwykle

var_dump($_POST['username']);

I przeglądarka nie będzie w stanie zasugerować informacji z poprzedniego żądania lub od poprzednich użytkowników.

Wszystko działa jak czar, nawet jeśli aktualizacje przeglądarek, chcą ignorować autouzupełnianie lub nie. To był najlepszy sposób, aby rozwiązać problem dla mnie.

Najlepsze rozwiązanie:

Zapobieganie autouzupełnianiu nazwy użytkownika (lub adresu e-mail) i hasła:

<input type="email" name="email"><!-- Can be type="text" -->
<input type="password" name="password" autocomplete="new-password">

Zapobiegaj autouzupełnianiu pola:

<input type="text" name="field" autocomplete="nope">

Wyjaśnienie: autocomplete kontynuuje pracę w <input>, autocomplete="off" nie działa, ale możesz zmienić off na losowy ciąg znaków, jak nope.

Działa w:

• Chrome: 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63 and 64

• Firefox: 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57 oraz 58

Żaden z wymienionych tu hacków nie zadziałał dla mnie w Chrome. Dyskusja na ten temat jest tutaj: https://code.google.com/p/chromium/issues/detail?id=468153#c41

Dodanie tego wewnątrz <form> działa (przynajmniej na razie):

<div style="display: none;">
    <input type="text" id="PreventChromeAutocomplete" name="PreventChromeAutocomplete" autocomplete="address-level4" />
</div>

Spróbuj dodać

Readonly onfocus= " this.removeAttribute ('readonly');"

Oprócz

Autocomplete= " off "

Do danych wejściowych, których nie chcesz zapamiętać(username, password, itd.) jak pokazano poniżej:

<input type="text" name="UserName" autocomplete="off" readonly 
    onfocus="this.removeAttribute('readonly');" >

<input type="password" name="Password" autocomplete="off" readonly 
    onfocus="this.removeAttribute('readonly');" >

Testowane na najnowszych wersjach głównych przeglądarek tj. Google Chrome, Mozilla Firefox, Microsoft Edge, itd. i działa bez problemu. Mam nadzieję, że to pomoże...

Możesz użyć w input.

Na przykład;

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

Oto ona:

function turnOnPasswordStyle() {
  $('#inputpassword').attr('type', "password");
}

<input oninput="turnOnPasswordStyle()" id="inputpassword" type="text">