Czy istnieje prawidłowy sposób W3C na wyłączenie autouzupełniania w formularzu HTML?

424

Podczas korzystania z xhtml1-transitional.dtddoctype, zbieranie numeru karty kredytowej z następującym kodem HTML

<input type="text" id="cardNumber" name="cardNumber" autocomplete='off'/>

oznaczy ostrzeżenie na walidatorze W3C:

nie ma atrybutu „autouzupełnianie”.

Czy istnieje sposób W3C / standardy, aby wyłączyć automatyczne uzupełnianie przeglądarki w poufnych polach w formularzu?

html standards forms w3c matowy b
źródło
10
Czy na pewno chcesz zadzierać z ustawieniem autouzupełniania użytkownika? Jeśli mają to włączone, prawdopodobnie to im się podoba. Autouzupełnianie jest funkcją całkowicie po stronie przeglądarki, podobnie jak przycisk, który pozwala użytkownikowi zmieniać rozmiar czcionki itp. Nie powinieneś ingerować w ich życzenia
rmeador
113
Nawet w przypadku czegoś tak wrażliwego jak numer karty kredytowej? Nie mogę myśleć o wielu ludziach, którzy chcieliby o tym pamiętać - zwłaszcza, że ​​automatyczne uzupełnianie jest domyślnie włączone w większości przeglądarek. Jeśli chcą, żeby pamiętał tak źle, mogą użyć czegoś, co wypełnia formularze, takie jak pasek narzędzi Google.
matt b
13
Mój przypadek użycia jest nieco inny - uruchamiam własne autouzupełnianie i nie chcę, żeby kolidowało z przeglądarką. Właśnie odkryłem, że autocomplete = "off" jest nieprawidłowy, ale wydaje się, że nie ma innego prostego rozwiązania (wstrzykiwanie go za pomocą js jest po prostu głupie)
thepeer
13
@rmeador, ponieważ czasami chcemy zapewnić bardziej przyjazną dla użytkownika alternatywę dla standardowego pola automatycznego sugerowania. @ Corydoras, proszę, nie przesuwaj wagi OSX, nie jest pomocne w rozwiązaniu tego pytania.
Josh M.
12
Problem polega na tym, że banki pociągną handlowca do odpowiedzialności, jeśli nastąpi nieuczciwa transakcja ... nawet jeśli to wina klienta w 100%. Dlatego w niektórych okolicznościach uzasadnione jest wyłączenie tej funkcji dla klienta.
Alexandre H. Tremblay

Odpowiedzi:

421

Oto dobry artykuł z MDC, w którym wyjaśniono problemy (i rozwiązania) związane z autouzupełnianiem. Microsoft opublikował tutaj również coś podobnego .

Szczerze mówiąc, jeśli jest to coś ważnego dla użytkowników, „łamanie” w ten sposób standardów wydaje się właściwe. Na przykład Amazon dość często używa atrybutu „autouzupełniania” i wydaje się, że działa dobrze.

Jeśli chcesz całkowicie usunąć to ostrzeżenie, możesz użyć JavaScript, aby zastosować atrybut do przeglądarek, które go obsługują (IE i Firefox są ważnymi przeglądarkami) przy użyciu someForm.setAttribute( "autocomplete", "off" ); someFormElm.setAttribute( "autocomplete", "off" );

Wreszcie, jeśli Twoja witryna korzysta z HTTPS, IE automatycznie wyłącza autouzupełnianie (podobnie jak niektóre inne przeglądarki, o ile mi wiadomo).

Aktualizacja

Ponieważ ta odpowiedź wciąż zyskuje sporo pozytywnych opinii, chciałem tylko zauważyć, że w HTML5 można użyć atrybutu „autouzupełniania” w elemencie formularza. Zobacz dokumentację W3C.

Nick Presta
źródło
41
Wygląda na to, że Firefox nie wyłącza autouzupełniania na https, ale to przydatna wiedza. Dzięki!
matt b
3
Safari nie przestrzega atrybutu autocomplete = „off”. Zobacz stackoverflow.com/questions/22817801/…
Skurpi,
1
autocompletemoże być użyte nie tylko na formelemencie , a offwartość działa przynajmniej wchromium-40.0.2214.115
x-yuri
Wygląda na to, że w3c rozszerza standardy autouzupełniania w HTML5.1 (w wersji roboczej tego komentarza) w3c.github.io/html/…
Justin Nafe
1
Jeśli nic nie działa, użyj pola tekstowego zamiast pola tekstowego, aby wyłączyć autouzupełnianie.
Bsienn
64

Byłbym bardzo zaskoczony, gdyby W3C zaproponował sposób, który działałby z (X) HTML4. Funkcja autouzupełniania jest całkowicie oparta na przeglądarce i została wprowadzona w ciągu ostatnich lat (długo po napisaniu standardu HTML4).

Nie zdziwiłoby się jednak, gdyby HTML5 miał taki.

Edit: Tak jak myślałem, HTML5 nie mają tej funkcji. Aby zdefiniować stronę jako HTML5, użyj następującego typu dokumentu (tj. Umieść to jako pierwszy tekst w kodzie źródłowym). Pamiętaj, że nie wszystkie przeglądarki obsługują ten standard, ponieważ wciąż jest w wersji roboczej.

<!DOCTYPE html>
Henrik Paul
źródło
7
Wszystkie przeglądarki oczekują, że starsze wersje Konquerora ją obsługują. Nawet IE6 obsługuje to. To doctype.
BalusC,
56

HTML 4 : Nie

HTML 5 : Tak

Atrybut autouzupełniania jest atrybutem wyliczonym. Atrybut ma dwa stany. Na mapach słowo kluczowe aby ON stanie, a poza mapami słowo kluczowe aby stanie wyłączonym. Ten atrybut można również pominąć. Brakującą wartością domyślną jest stan włączenia . Stan wyłączenia wskazuje, że domyślnie formanty formularza w formularzu będą miały wyłączoną nazwę pola autouzupełniania ; stan włączenia wskazuje, że domyślnie formanty formularza będą miały autofillnazwę pola ustawioną na „on”.

Odniesienie: W3

RuudKok
źródło
@ freestock.tk Tak, jest wyraźniejszy niż wszystkie inne. Prostota się liczy.
OverCoder
32

Nie, ale automatyczne uzupełnianie przeglądarki jest często wywoływane przez pole mające ten sam nameatrybut co pola, które zostały wcześniej wypełnione. Jeśli potrafisz opracować sprytny sposób uzyskania losowej nazwy pola , funkcja autouzupełniania nie byłaby w stanie pobrać wcześniej wprowadzonych wartości dla pola.

Jeśli nadasz polu wejściowemu nazwę typu „ email_<?= randomNumber() ?>”, a następnie skrypt, który odbierze tę pętlę danych przez zmienne POST lub GET, szukając czegoś pasującego do wzorca „ email_[some number]”, możesz to zrobić, a to miałoby ( praktycznie) gwarantowany sukces, niezależnie od przeglądarki .

Phantom Watson
źródło
6
Utrudniłoby to automatyczne testowanie.
David Waters
14
Utrudniłoby to automatyczne testowanie, tylko jeśli twoje oprogramowanie testujące nie jest w stanie sprawdzić / odczytać pól, które mogą mieć dołączoną liczbę losową. Może być czas na aktualizację oprogramowania do automatycznego testowania.
corydoras
8
Informacje o autouzupełnianiu byłyby nadal zapisywane w katalogu danych przeglądarki, prawda?
Joey Adams,
2
Prawdopodobnie. Ale nie należy się spodziewać, że użytkownik pojawi się ponownie.
Phantom Watson
1
Chrome używa teraz atrybutu type = "password" zamiast atrybutu name dla konkretnej witryny. Mam name = "newpassword" autocomplete = 'off' type = "password" i zostanie automatycznie wypełnione! Jeśli zmienię typ, nie będzie autouzupełniania
Enigma Plus
31

Nie, dobry artykuł jest tutaj na Mozila Wiki .

Nadal będę używać nieprawidłowego attribute. Myślę, że tutaj pragmatyzm powinien wygrać z walidacją.

David Waters
źródło
23

Co powiesz na ustawienie go w JavaScript?

var e = document.getElementById('cardNumber');
e.autocomplete = 'off'; // Maybe should be false

To nie jest idealne, ale Twój HTML będzie ważny.

Greg
źródło
8
Używanie javascript jako obejścia błędów sprawdzania poprawności jest jak zamiatanie kurzu pod dywan. Chociaż dokument HTML może stać się prawidłowy, wynikowa strona HTML + JS nie będzie.
fregante
11

Jeśli używasz jQuery, możesz zrobić coś takiego:

$(document).ready(function(){$("input.autocompleteOff").attr("autocomplete","off");});

i użyj klasy autocompleteOff, gdzie chcesz:

<input type="text" name="fieldName" id="fieldId" class="firstCSSClass otherCSSClass autocompleteOff" />

Jeśli chcesz, aby WSZYSTKIE twoje dane wejściowe były autocomplete=off, możesz po prostu użyć tego:

$(document).ready(function(){$("input").attr("autocomplete","off");});
Totoche
źródło
4
Samo użycie doctype HTML5 jest łatwiejsze i lepsze.
BalusC,
5
i tak nie jest to naprawdę poprawny HTML, po prostu ustawia (niepoprawny) autocompleteatrybut w inny sposób niż w HTML
Matt B
Ten kod nie działa dla mnie; Użyłem, $('input.autocompleteOff').val('');co wydaje się OK.
dqd
5
Używanie javascript jako obejścia błędów sprawdzania poprawności jest jak zamiatanie kurzu pod dywan. Chociaż dokument HTML może stać się prawidłowy, wynikowa strona HTML + JS nie będzie.
fregante
8

Innym sposobem - który pomoże również w bezpieczeństwie, jest wywoływanie pola wprowadzania danych za każdym razem, gdy jest wyświetlane, coś innego: zupełnie jak captha. W ten sposób sesja może odczytać dane jednorazowe, a funkcja autouzupełniania nie będzie działać.

Tylko kwestia dotycząca pytania rmeadora o to, czy powinieneś ingerować w przeglądarkę: opracowujemy systemy zarządzania kontaktami i CRM, a kiedy wpisujesz dane innych osób w formie, nie chcesz, aby stale sugerowała twoje dane.

Działa to na nasze potrzeby, ale mamy luksus, mówiąc użytkownikom, aby otrzymali przyzwoitą przeglądarkę :)

autocomplete='off'
Enigma Plus
źródło
8

autocomplete="off" powinno to rozwiązać problem wszystkich współczesnych przeglądarek.

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

W aktualnych wersjach przeglądarek Gecko atrybut autouzupełniania działa idealnie. We wcześniejszych wersjach, wracając do Netscape 6.2, działał z wyjątkiem formularzy z „Adres” i „Nazwa”

Aktualizacja

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:

autocomplete="nope"

Ponieważ ta losowa wartość nie jest a valid one, przeglądarka zrezygnuje.

Dokumentacja

Emilio Gort
źródło
Nowoczesne przeglądarki nie respektują autouzupełniania = wyłączone z wyboru. :/ Niestety.
Alexus
@Alexus dodał aktualizację ... bardzo szybka zmiana internetu
Emilio Gort
6

Użycie losowego atrybutu „nazwa” działa dla mnie.

Resetuję atrybut name podczas wysyłania formularza, aby nadal można było uzyskać do niego dostęp po nazwie, gdy formularz jest wysyłany. (używanie atrybutu id do przechowywania nazwy)

opznhaarlems
źródło
5

Zauważ, że istnieje pewne zamieszanie co do lokalizacji atrybutu autouzupełniania. Można go zastosować do całego tagu FORM lub do pojedynczych tagów INPUT, a tak naprawdę nie był on znormalizowany przed HTML5 (który wyraźnie dopuszcza obie lokalizacje ). Starsze dokumenty, w szczególności ten artykuł Mozilli, wspominają tylko o znaczniku FORM. Jednocześnie niektóre skanery bezpieczeństwa będą szukały autouzupełniania tylko w znaczniku INPUT i narzekają, jeśli go brakuje (nawet jeśli jest on w FORMULARZU nadrzędnym). Bardziej szczegółowa analiza tego bałaganu jest opublikowana tutaj: zamieszanie w zakresie atrybutów AUTOCOMPLETE = OFF w formularzach HTML .

kravietz
źródło
3

Nie jest to idealne rozwiązanie, ale możesz zmieniać identyfikator i nazwę pola tekstowego za każdym razem, gdy go renderujesz - musisz śledzić go także po stronie serwera, aby uzyskać dane.

Nie jestem pewien, czy to zadziała, czy nie, to tylko myśl.

Kieron
źródło
2

Myślę, że jest prostszy sposób. Utwórz ukryte dane wejściowe o losowej nazwie (przez javascript) i ustaw na to nazwę użytkownika. Powtórz z hasłem. W ten sposób skrypt zaplecza dokładnie wie, jaka jest odpowiednia nazwa pola, jednocześnie utrzymując autouzupełnianie w ciemności.

Prawdopodobnie się mylę, ale to tylko pomysł.

Węże i Kawa
źródło
2 
if (document.getElementsByTagName) {
    var inputElements = document.getElementsByTagName("input");
    for (i=0; inputElements[i]; i++) {
        if (inputElements[i].className && (inputElements[i].className.indexOf("disableAutoComplete") != -1)) {
            inputElements[i].setAttribute("autocomplete","off");
        }
    }
}
Jack Tuck
źródło
-1

To rozwiązanie działa ze mną:

$('form,input,select,textarea').attr("autocomplete", "nope");

jeśli chcesz użyć autouzupełniania w tym regionie: dodaj autocomplete="false"element ex:

<input id="search" name="search" type="text" placeholder="Name or Code" autcomplete="false">
Hưng Trịnh
źródło
-5

Prawidłowe autouzupełnianie wyłączone

<script type="text/javascript">
    /* <![CDATA[ */
    document.write('<input type="text" id="cardNumber" name="cardNumber" autocom'+'plete="off"/>');
    /* ]]> */ 
</script>
Southampton Web Design
źródło
13
z pewnością jeśli użytkownik wyłączył JS, nie może zrealizować zamówienia, ponieważ nie może podać numeru swojej karty? Lepiej uzupełnić atrybut przez JS powiedziałbym - najgorszy przypadek, JS off daje pole numeru karty z możliwością automatycznego uzupełniania, ale przynajmniej mogą złożyć zamówienie ... tylko myśl :)
Terry_Brown
3
To nawet nie jest śmieszne.
Ricardo Pieper