Chciałbym wiedzieć, czy istnieje jakiś specjalny znacznik, aby włączyć funkcję autouzupełniania Chrome dla określonego formularza. Znalazłem tylko pytania, jak to wyłączyć, ale chciałbym wiedzieć, czy mogę dodać jakiś kod do kodu HTML, aby powiedzieć przeglądarce „to jest adres adresu” lub „to jest kod pocztowy pole ”, aby poprawnie go wypełnić (zakładając, że użytkownik aktywował tę funkcję).
Odpowiedzi:
AKTUALIZACJA na rok 2017: Wygląda na to, że odpowiedź Katie zawiera więcej aktualnych informacji niż moja. Przyszli czytelnicy: oddaj głos na jej odpowiedź .
To świetne pytanie, dla którego dokumentacja jest zaskakująco trudna do zdobycia. W rzeczywistości w wielu przypadkach okaże się, że funkcja autouzupełniania Chrome „po prostu działa”. Na przykład następujący fragment kodu HTML tworzy formularz, który przynajmniej dla mnie (Chrome w. 18) jest automatycznie wypełniany po kliknięciu pierwszego pola:
<!DOCTYPE html>
<html>
<body>
<form method="post">
First name:<input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="text" name="email" /><br />
Phone: <input type="text" name="phone" /><br />
Address: <input type="text" name="address" /><br />
</form>
</body>
</html>Jednak ta odpowiedź jest niezadowalająca, ponieważ pozostawia rozwiązanie w dziedzinie „magii”. Głębsze kopanie Dowiedziałem się, że Chrome (i inne przeglądarki z włączonym autouzupełnianiem) polegają przede wszystkim na wskazówkach kontekstowych w celu określenia rodzaju danych, które należy wypełnić w elementach formularza. Przykłady takich wskazówek kontekstowych obejmują nameelement wejściowy, tekst otaczający element i dowolny tekst zastępczy.
Jednak ostatnio zespół Chrome przyznał, że jest to niezadowalające rozwiązanie, i zaczęli nalegać na standaryzację w tej sprawie. Bardzo pouczający post z grupy Google Webmasters ostatnio omawiał ten problem, wyjaśniając:
Niestety do tej pory webmasterzy mieli trudności z zapewnieniem, że Chrome i inni dostawcy wypełniania formularzy mogą poprawnie parsować swoje formularze. Istnieją pewne standardy; ale nakładają ciężkie obciążenia na wdrożenie strony internetowej, więc nie są one często stosowane w praktyce.
(„Standardy”, do których się odnoszą, to najnowsza wersja specyfikacji wymienionej w odpowiedzi Avalanchisa powyżej).
W dalszej części posta Google opisano ich proponowane rozwiązanie (co spotkało się z poważną krytyką w komentarzach do postu). Proponują użycie nowego atrybutu do tego celu:
Wystarczy dodać atrybut do elementu wejściowego, na przykład pole adresu e-mail może wyglądać następująco:
<input type=”text” name=”field1” x-autocompletetype=”email” />
...gdzie x- oznacza „eksperymentalny” i zostanie usunięty, jeśli i kiedy stanie się standardem. Przeczytaj post, aby uzyskać więcej informacji, lub jeśli chcesz kopać głębiej, znajdziesz pełniejsze wyjaśnienie propozycji na wiki whatwg .
AKTUALIZACJA:
Jak wskazano w tych wnikliwych odpowiedziach , wszystkie wyrażenia regularne używane przez Chrome do identyfikowania / rozpoznawania wspólnych pól można znaleźć autofill_regex_constants.cc.utf8. Aby odpowiedzieć na pierwotne pytanie, upewnij się, że nazwy pól HTML są zgodne z tymi wyrażeniami. Niektóre przykłady obejmują:
"first.*name|initials|fname|first$""last.*name|lname|surname|last$|secondname|family.*name""e.?mail""address.*line|address1|addr1|street""zip|postal|post.*code|pcode|^1z$"To pytanie jest dość stare, ale mam zaktualizowaną odpowiedź !
Oto link do dokumentacji WHATWG w celu włączenia autouzupełniania.
Google napisał całkiem niezły przewodnik do tworzenia aplikacji internetowych przyjaznych dla urządzeń mobilnych. Mają sekcję na temat nazewnictwa danych wejściowych w formularzach, aby łatwo korzystać z automatycznego wypełniania. Chociaż napisano to na urządzenia mobilne, dotyczy to zarówno komputerów stacjonarnych, jak i mobilnych!
Oto kilka kluczowych punktów, jak włączyć autouzupełnianie:
<label>dla wszystkich swoich <input>pólautocompleteatrybut do swoich <input>tagów i wypełnij go, korzystając z tego przewodnika .namei autocompleteatrybuty poprawnie dla wszystkich <input>tagówPrzykład :
<label for="frmNameA">Name</label>
<input type="text" name="name" id="frmNameA"
placeholder="Full name" required autocomplete="name">
<label for="frmEmailA">Email</label>
<input type="email" name="email" id="frmEmailA"
placeholder="name@example.com" required autocomplete="email">
<!-- note that "emailC" will not be autocompleted -->
<label for="frmEmailC">Confirm Email</label>
<input type="email" name="emailC" id="frmEmailC"
placeholder="name@example.com" required autocomplete="email">
<label for="frmPhoneNumA">Phone</label>
<input type="tel" name="phone" id="frmPhoneNumA"
placeholder="+1-555-555-1212" required autocomplete="tel"><input>tagiAby uruchomić autouzupełnianie, upewnij się, że poprawnie nazywasz namei autocompleteatrybuty w <input>tagach. Umożliwi to automatyczne uzupełnianie formularzy. Upewnij się także, aby mieć <label>! Informacje te można również znaleźć tutaj .
Oto jak nazwać swoje dane wejściowe:
name:name fname mname lnameautocomplete:
name (pełne imię i nazwisko)given-name (na imię)additional-name (dla drugiego imienia)family-name (dla nazwiska)<input type="text" name="fname" autocomplete="given-name">name:emailautocomplete:email<input type="text" name="email" autocomplete="email">name:address city region province state zip zip2 postal country autocomplete:
street-addressaddress-line1address-line2address-level1 (stan lub prowincja)address-level2 (Miasto)postal-code (kod pocztowy)countryname:phone mobile country-code area-code exchange suffix extautocomplete:telname:ccname cardnumber cvc ccmonth ccyear exp-date card-typeautocomplete:
cc-namecc-numbercc-csccc-exp-monthcc-exp-yearcc-expcc-typename:usernameautocomplete:usernamename:passwordautocomplete:
current-password (w przypadku formularzy logowania)new-password (w przypadku formularzy rejestracji i zmiany hasła)Z moich testów x-autocompletetag nic nie robi. Zamiast tego użyj autocompleteznaczników na znacznikach wejściowych i ustaw ich wartości zgodnie ze specyfikacją HTML tutaj http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms. html # pole autouzupełniania .
Przykład:
<input name="fname" autocomplete="given-name" type="text" placeholder="First Name" required>Nadrzędny znacznik formularza wymaga autocomplete = „on” i method = „POST”.
on , offlub default. To jest nieprawidłowa marża i będzie podatna na niespójności. Myślę, że umieszczenie w atrybucie autouzupełniania jest nieistotne. Sądzę, że wygląda na wszystkie atrybuty, a autouzupełnianie jest jednym z tych, które sprawdza.
Musisz odpowiednio nazwać elementy, aby przeglądarka je automatycznie wypełniła.
Oto specyfikacja IETF:
Po prostu grałem ze specyfikacją i otrzymałem dobry przykład działania - w tym kilka innych dziedzin.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<form autocomplete="on" method="POST">
<fieldset>
<legend>Ship the blue gift to...</legend>
<p>
<label> Firstname:
<input name="fname" autocomplete="section-blue shipping given-name" type="text" required>
</label>
</p>
<p>
<label> Lastname:
<input name="fname" autocomplete="section-blue shipping family-name" type="text" required>
</label>
</p>
<p>
<label> Address: <input name=ba
autocomplete="section-blue shipping street-address">
</label>
</p>
<p>
<label> City: <input name=bc
autocomplete="section-blue shipping address-level2">
</label>
</p>
<p>
<label> Postal Code: <input name=bp
autocomplete="section-blue shipping postal-code">
</label>
</p>
</fieldset>
<fieldset>
<legend>Ship the red gift to...</legend>
<p>
<label> Firstname:
<input name="fname" autocomplete="section-red shipping given-name" type="text" required>
</label>
</p>
<p>
<label> Lastname:
<input name="fname" autocomplete="section-red shipping family-name" type="text" required>
</label>
</p>
<p>
<label> Address: <input name=ra
autocomplete="section-red shipping street-address">
</label>
</p>
<p>
<label> City: <input name=bc
autocomplete="section-red shipping address-level2">
</label>
</p>
<p>
<label> Postal Code: <input name=rp
autocomplete="section-red shipping postal-code">
</label>
</p>
</fieldset>
<fieldset>
<legend>payment address</legend>
<p>
<label> Firstname:
<input name="fname" autocomplete="billing given-name" type="text" required>
</label>
</p>
<p>
<label> Lastname:
<input name="fname" autocomplete="billing family-name" type="text" required>
</label>
</p>
<p>
<label> Address: <input name=ra
autocomplete="billing street-address">
</label>
</p>
<p>
<label> City: <input name=bc
autocomplete="billing address-level2">
</label>
</p>
<p>
<label> Postal Code: <input name=rp
autocomplete="billing postal-code">
</label>
</p>
</fieldset>
<input type="submit" />
</form>
</body>
</html>Zawiera 2 oddzielne obszary adresowe, a także różne typy adresów. Przetestowałem to również na iOS 8.1.0 i wygląda na to, że zawsze wypełnia wszystkie pola jednocześnie, a adres autouzupełniania chrome na pulpicie według adresu.
Wygląda na to, że uzyskamy większą kontrolę nad tą funkcją autouzupełniania, na Chrome Canary pojawi się nowy eksperymentalny interfejs API, którego można użyć do uzyskania dostępu do danych po zapytaniu użytkownika:
http://www.chromium.org/developers/using-requestautocomplete http://blog.alexmaccaw.com/requestautocomplete
nowe informacje od Google:
http://googlewebmastercentral.blogspot.de/2015/03/helping-users-fill-out-online-forms.html
Oto prawdziwa odpowiedź:
Działa to: http://jsfiddle.net/68LsL1sq/1/ <label for="name">Nom</label>
To nie: http://jsfiddle.net/68LsL1sq/2/ <label for="name">No</label>
Jedyną różnicą jest sama etykieta. Nazwa „Nom” pochodzi od „Name” lub „Nome” w języku portugalskim.
Oto, czego potrzebujesz:
<label for="id_of_field">Name</label><input id="id_of_field"></input>Nic więcej.
Oto nowa lista „nazw” autouzupełniania Google. Istnieją wszystkie obsługiwane nazwy w dowolnym dozwolonym języku.
Google udostępnia teraz dokumentację dotyczącą tego:
i
W moim przypadku $('#EmailAddress').attr('autocomplete', 'off');nie działa. Ale następujące prace działają na chromie w wersji 67 autorstwa jQuery.
$('#EmailAddress').attr('autocomplete', 'new-email');
$('#Password').attr('autocomplete', 'new-password');