Tôi muốn biết nếu có một số loại đánh dấu đặc biệt để bật tính năng tự động điền Chrome cho một hình thức cụ thể. Tôi chỉ tìm thấy câu hỏi về cách vô hiệu hóa nó, nhưng tôi muốn biết liệu tôi có thể thêm một số loại đánh dấu vào mã html để nói với trình duyệt "đây là đầu vào cho địa chỉ" hay "đây là mã ZIP trường "để điền chính xác vào (giả sử người dùng kích hoạt tính năng này).
Câu trả lời:
CẬP NHẬT cho năm 2017: Có vẻ như câu trả lời từ Katie có nhiều thông tin cập nhật hơn của tôi. Độc giả tương lai: đưa ra phiếu bầu của bạn cho câu trả lời của cô ấy .
Đây là một câu hỏi tuyệt vời và một trong đó tài liệu rất khó để có được. Trên thực tế, trong nhiều trường hợp, bạn sẽ thấy rằng chức năng Tự động điền của Chrome "chỉ hoạt động". Ví dụ: đoạn mã html sau đây tạo ra một biểu mẫu, ít nhất là đối với tôi (Chrome v. 18), sẽ tự động được điền sau khi nhấp vào trường đầu tiên:
<!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>
Tuy nhiên, câu trả lời này là không thỏa đáng, vì nó để lại giải pháp trong vương quốc của "ma thuật". Tìm hiểu sâu hơn tôi biết rằng Chrome (và các trình duyệt hỗ trợ tự động điền khác) chủ yếu dựa vào các manh mối theo ngữ cảnh để xác định loại dữ liệu cần điền vào các thành phần của biểu mẫu. Ví dụ về các đầu mối theo ngữ cảnh như vậy bao gồm namephần tử đầu vào, văn bản xung quanh phần tử và bất kỳ văn bản giữ chỗ nào.
Tuy nhiên, gần đây, nhóm Chrome đã thừa nhận rằng đây là một giải pháp không thỏa đáng và họ đã bắt đầu bức xúc để chuẩn hóa trong vấn đề này. Một bài viết rất nhiều thông tin từ nhóm Google Webmaster đã thảo luận về vấn đề này, giải thích:
Thật không may, cho đến nay, rất khó để các quản trị web đảm bảo rằng Chrome và các nhà cung cấp điền biểu mẫu khác có thể phân tích chính xác biểu mẫu của họ. Một số tiêu chuẩn tồn tại; nhưng họ đặt gánh nặng lớn lên việc triển khai trang web, vì vậy chúng không được sử dụng nhiều trong thực tế.
("Các tiêu chuẩn" mà họ đề cập đến là một câu gần đây hơn về thông số kỹ thuật được đề cập trong câu trả lời của Avalanchis ở trên.)
Bài đăng trên Google tiếp tục mô tả giải pháp được đề xuất của họ (được đáp ứng bởi những lời chỉ trích quan trọng trong các bình luận của bài đăng). Họ đề xuất sử dụng một thuộc tính mới cho mục đích này:
Chỉ cần thêm một thuộc tính cho thành phần đầu vào, ví dụ: trường địa chỉ email có thể trông như sau:
<input type=”text” name=”field1” x-autocompletetype=”email” />
... Nơi x-viết tắt của "thử nghiệm" và sẽ bị xóa nếu & khi điều này trở thành tiêu chuẩn. Đọc bài đăng để biết thêm chi tiết, hoặc nếu bạn muốn tìm hiểu sâu hơn, bạn sẽ tìm thấy một lời giải thích đầy đủ hơn về đề xuất trên wiki whatwg .
CẬP NHẬT:
Như đã chỉ ra trong các câu trả lời sâu sắc này , tất cả các biểu thức thông thường mà Chrome sử dụng để xác định / nhận ra các trường phổ biến đều có thể được tìm thấy . Vì vậy, để trả lời câu hỏi ban đầu, chỉ cần đảm bảo tên cho các trường html của bạn được khớp với các biểu thức này. Một số ví dụ bao gồm:autofill_regex_constants.cc.utf8
"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$"Câu hỏi này khá cũ nhưng tôi có một câu trả lời cập nhật !
Đây là một liên kết đến tài liệu WHATWG để cho phép tự động hoàn tất.
Google đã viết một hướng dẫn khá hay để phát triển các ứng dụng web thân thiện với thiết bị di động. Họ có một phần về cách đặt tên đầu vào trên các biểu mẫu để dễ dàng sử dụng tự động điền. Mặc dù nó được viết cho thiết bị di động, điều này áp dụng cho cả máy tính để bàn và thiết bị di động!
Dưới đây là một số điểm chính về cách bật tự động hoàn thành:
<label>cho tất cả các <input>lĩnh vực của bạnautocompletethuộc tính vào <input>thẻ của bạn và điền nó vào bằng hướng dẫn này .namevà autocompletethuộc tính của bạn cho tất cả <input>các thẻVí dụ :
<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>thẻ của bạnĐể kích hoạt tự động hoàn tất, hãy đảm bảo bạn đặt tên chính xác namevà autocompletecác thuộc tính trong <input>thẻ của mình . Điều này sẽ tự động cho phép tự động hoàn thành trên các biểu mẫu. Đảm bảo cũng có a <label>! Thông tin này cũng có thể được tìm thấy ở đây .
Đây là cách đặt tên đầu vào của bạn:
name:name fname mname lnameautocomplete:
name (cho tên đầy đủ)given-name (cho tên đầu tiên)additional-name (cho tên đệm)family-name (cho họ)<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 (tiểu bang hoặc tỉnh)address-level2 (thành phố)postal-code (Mã Bưu Chính)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 (đối với các hình thức đăng nhập)new-password (đối với các hình thức đăng ký và thay đổi mật khẩu)Từ thử nghiệm của tôi, x-autocompletethẻ không làm gì cả. Thay vào đó, hãy sử dụng autocompletecác thẻ trên thẻ đầu vào của bạn và đặt giá trị của chúng theo thông số HTML tại đây http://www.whatwg.org/specs/web-apps/civerse-work/multipage/association-of-controls-and-forms. html # tự động điền trường .
Thí dụ:
<input name="fname" autocomplete="given-name" type="text" placeholder="First Name" required>Thẻ biểu mẫu mẹ cần autocomplete = "on" và method = "POST".
on , offhoặc default. Vì vậy, đây là đánh dấu không hợp lệ và sẽ dễ xảy ra mâu thuẫn. Tôi thực sự nghĩ rằng vị trí trong thuộc tính tự động hoàn thành là không liên quan. Tôi đoán nó xem tất cả các thuộc tính và tự động hoàn thành là một trong những thuộc tính mà nó kiểm tra.
Bạn cần đặt tên cho các yếu tố một cách thích hợp để trình duyệt sẽ tự động điền chúng.
Đây là thông số IETF cho việc này:
Tôi chỉ chơi arround với thông số kỹ thuật và có một ví dụ hoạt động tốt - bao gồm một vài lĩnh vực nữa.
<!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>Nó chứa 2 vùng địa chỉ riêng biệt và cũng khác nhau về loại địa chỉ. Đã thử nghiệm nó trên iOS 8.1.0 và dường như nó luôn lấp đầy tất cả các trường cùng một lúc, trong khi địa chỉ tự động chrome trên máy tính để bàn theo địa chỉ.
Có vẻ như chúng tôi sẽ kiểm soát nhiều hơn về tính năng tự động điền này, có một API thử nghiệm mới đến với Chrome Canary, có thể được sử dụng để truy cập dữ liệu sau khi hỏi người dùng về tính năng này:
http://www.chromium.org/developers/USE-requestautocomplete http://blog.alexmaccaw.com/requestautocomplete
thông tin mới của google:
http://googlewebmastercentral.blogspot.de/2015/03/helping-users-fill-out-online-forms.html
Đây là câu trả lời thực sự:
Công việc này: http://jsfiddle.net/68LsL1sq/1/ <label for="name">Nom</label>
Đây không phải là: http://jsfiddle.net/68LsL1sq/2/ <label for="name">No</label>
Sự khác biệt duy nhất là trong chính nhãn hiệu này. "Nom" gọi từ "Tên" hoặc "Nome" trong tiếng Bồ Đào Nha.
Vì vậy, đây là những gì bạn cần:
<label for="id_of_field">Name</label><input id="id_of_field"></input>Chỉ có bấy nhiêu thôi.
Dưới đây là danh sách mới "tên" của Google Tự động điền. Có tất cả các tên được hỗ trợ trong bất kỳ ngôn ngữ được phép.
Google hiện cung cấp tài liệu cho việc này:
Giúp người dùng kiểm tra nhanh hơn với Tự động điền | Web | Nhà phát triển Google
và
Tạo biểu mẫu tuyệt vời: Sử dụng siêu dữ liệu để bật tự động hoàn thành | Web | Nhà phát triển Google
Trong trường hợp của tôi, $('#EmailAddress').attr('autocomplete', 'off');không được làm việc. Nhưng sau đây hoạt động trên phiên bản chrome 67 của jQuery.
$('#EmailAddress').attr('autocomplete', 'new-email');
$('#Password').attr('autocomplete', 'new-password');