ฉันต้องการทราบว่ามีมาร์กอัปชนิดพิเศษเพื่อเปิดใช้งานคุณลักษณะป้อนอัตโนมัติของ Chrome สำหรับแบบฟอร์มเฉพาะหรือไม่ ฉันเพิ่งพบคำถามเกี่ยวกับวิธีปิดการใช้งาน แต่ฉันต้องการทราบว่าฉันสามารถเพิ่มมาร์กอัปบางประเภทในรหัส html เพื่อบอกเบราว์เซอร์ "นี่คืออินพุตสำหรับที่อยู่" หรือ "นี่คือรหัสไปรษณีย์ ฟิลด์ "เพื่อกรอกข้อมูลให้ถูกต้อง (ถือว่าผู้ใช้เปิดใช้งานคุณสมบัตินี้)
คำตอบ:
อัปเดตสำหรับปี 2017: ดูเหมือนว่าคำตอบจาก Katie จะมีข้อมูลที่ทันสมัยกว่าของฉัน ผู้อ่านในอนาคต: ให้คะแนนโหวตของคุณกับคำตอบของเธอคำตอบของเธอ
นี่เป็นคำถามที่ยอดเยี่ยมและเป็นเรื่องที่ยากที่จะเข้าใจเอกสาร ที่จริงแล้วในหลายกรณีคุณจะพบว่าฟังก์ชันการป้อนอัตโนมัติของ Chrome "ใช้งานได้" ตัวอย่างเช่นส่วนของ html ต่อไปนี้จะสร้างแบบฟอร์มซึ่งอย่างน้อยสำหรับฉัน (Chrome v. 18) จะถูกกรอกโดยอัตโนมัติหลังจากคลิกในฟิลด์แรก:
<!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>อย่างไรก็ตามคำตอบนี้ไม่เป็นที่น่าพอใจเนื่องจากมันทิ้งคำตอบไว้ในขอบเขตของ "เวทมนตร์" การขุดลึกฉันได้เรียนรู้ว่า Chrome (และเบราว์เซอร์ที่เปิดใช้งานการป้อนอัตโนมัติอื่น ๆ ) ส่วนใหญ่อาศัยเบาะแสบริบทเพื่อกำหนดประเภทของข้อมูลที่ควรกรอกลงในองค์ประกอบของฟอร์ม ตัวอย่างของปมบริบทดังกล่าวรวมถึงnameองค์ประกอบของการป้อนข้อความข้อความโดยรอบองค์ประกอบและข้อความตัวยึดใด ๆ
อย่างไรก็ตามเมื่อเร็ว ๆ นี้ทีม Chrome ยอมรับว่านี่เป็นวิธีที่ไม่น่าพอใจและพวกเขาได้เริ่มกดเพื่อสร้างมาตรฐานในเรื่องนี้ โพสต์ที่ให้ข้อมูลมากจากกลุ่มผู้ดูแลเว็บของ Google เมื่อเร็ว ๆ นี้ได้กล่าวถึงปัญหานี้โดยอธิบาย:
น่าเสียดายที่ตอนนี้เป็นเรื่องยากสำหรับผู้ดูแลเว็บที่จะให้แน่ใจว่า Chrome และผู้ให้บริการกรอกแบบฟอร์มอื่น ๆ สามารถแยกวิเคราะห์ฟอร์มได้อย่างถูกต้อง มีมาตรฐานอยู่บ้าง แต่พวกเขาใช้ภาระที่หนักหน่วงในการติดตั้งเว็บไซต์ดังนั้นพวกเขาจึงไม่ค่อยได้ใช้ประโยชน์เท่าไหร่
("มาตรฐาน" ที่พวกเขาอ้างถึงเป็นverion ล่าสุดของข้อกำหนดที่ระบุไว้ในคำตอบของ Avalanchis ด้านบน)
โพสต์ของ Google ดำเนินการต่อเพื่ออธิบายวิธีแก้ปัญหาที่เสนอ (ซึ่งพบได้จากการวิจารณ์ที่สำคัญในความคิดเห็นของโพสต์) พวกเขาเสนอให้ใช้คุณลักษณะใหม่เพื่อจุดประสงค์นี้:
เพียงเพิ่มแอตทริบิวต์ให้กับองค์ประกอบอินพุตตัวอย่างเช่นฟิลด์ที่อยู่อีเมลอาจมีลักษณะดังนี้:
<input type=”text” name=”field1” x-autocompletetype=”email” />
... โดยที่x-หมายถึง "ทดลอง" และจะถูกลบหาก & เมื่อสิ่งนี้กลายเป็นมาตรฐาน อ่านโพสต์รายละเอียดเพิ่มเติมหรือถ้าคุณต้องการที่จะขุดลึกคุณจะหาคำอธิบายที่สมบูรณ์มากขึ้นของข้อเสนอในวิกิพีเดีย WHATWG
UPDATE:
เป็นแหลมออกในสิ่งเหล่านี้ที่ชาญฉลาด คำตอบที่นิพจน์ทั่วไปทั้งหมดที่ Chrome ใช้เพื่อระบุ / รู้จักฟิลด์ทั่วไปสามารถพบautofill_regex_constants.cc.utf8ได้ ดังนั้นเพื่อตอบคำถามเดิมเพียงให้แน่ใจว่าชื่อของฟิลด์ html ของคุณตรงกับการแสดงออกเหล่านี้ ตัวอย่างบางส่วน ได้แก่ :
"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$"คำถามนี้ค่อนข้างเก่า แต่ฉันมีคำตอบที่อัพเดตแล้ว !
นี่คือลิงค์ไปยังเอกสาร WHATWG สำหรับการเปิดใช้งานการเติมข้อความอัตโนมัติ
Google เขียนคำแนะนำที่ดีสำหรับการพัฒนาเว็บแอปพลิเคชันที่เป็นมิตรกับอุปกรณ์พกพา พวกเขามีส่วนเกี่ยวกับวิธีตั้งชื่ออินพุตในแบบฟอร์มเพื่อใช้การป้อนอัตโนมัติได้อย่างง่ายดาย แม้ว่ามันจะถูกเขียนขึ้นสำหรับมือถือมันใช้ได้ทั้งบนเดสก์ท็อปและมือถือ!
ต่อไปนี้เป็นประเด็นสำคัญเกี่ยวกับวิธีเปิดใช้งานการเติมข้อความอัตโนมัติ:
<label>สำหรับ<input>เขตข้อมูลทั้งหมดของคุณautocompleteททริบิวให้กับ<input>แท็กของคุณและกรอกโดยใช้คู่มือนี้nameและautocompleteแอตทริบิวต์ของคุณให้ถูกต้องสำหรับ<input>แท็กทั้งหมดตัวอย่าง :
<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>แท็กของคุณเพื่อให้การเติมข้อความอัตโนมัติให้แน่ใจว่าคุณตั้งชื่อnameและautocompleteแอตทริบิวต์อย่างถูกต้องใน<input>แท็กของคุณ สิ่งนี้จะอนุญาตให้เติมข้อความอัตโนมัติในแบบฟอร์มโดยอัตโนมัติ ตรวจสอบให้แน่ใจว่ายังมี<label>! ข้อมูลนี้สามารถพบได้ที่นี่ที่นี่
ต่อไปนี้เป็นวิธีตั้งชื่ออินพุตของคุณ:
name:name fname mname lnameautocomplete:
name (สำหรับชื่อเต็ม)given-name (สำหรับชื่อ)additional-name (สำหรับชื่อกลาง)family-name (สำหรับนามสกุล)<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 (รัฐหรือจังหวัด)address-level2 (เมือง)postal-code (รหัสไปรษณีย์)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 (สำหรับฟอร์มลงชื่อเข้าใช้)new-password (สำหรับฟอร์มการสมัครใช้งานและการเปลี่ยนรหัสผ่าน)จากการทดสอบของฉันx-autocompleteแท็กไม่ทำอะไรเลย แทนที่จะใช้autocompleteแท็กบนแท็กอินพุตของคุณและตั้งค่าตามข้อกำหนด HTML ที่นี่http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms HTML
ตัวอย่าง:
<input name="fname" autocomplete="given-name" type="text" placeholder="First Name" required>แท็กแบบฟอร์มหลักต้องการ autocomplete = "on" และ method = "POST"
on , หรือoff defaultดังนั้นนี่คือเครื่องหมายที่ไม่ถูกต้องและมีแนวโน้มที่จะไม่สอดคล้องกัน ฉันคิดว่าตำแหน่งในแอตทริบิวต์เติมข้อความอัตโนมัตินั้นไม่เกี่ยวข้อง ฉันเดาว่ามันจะดูที่คุณลักษณะทั้งหมดและการเติมข้อความอัตโนมัติเกิดขึ้นเป็นหนึ่งในคุณสมบัติที่ตรวจสอบ
คุณต้องตั้งชื่อองค์ประกอบอย่างเหมาะสมเพื่อที่เบราว์เซอร์จะป้อนอัตโนมัติ
นี่คือข้อมูลจำเพาะของ IETF สำหรับสิ่งนี้:
ฉันเพิ่งเล่นกับสเป็คและได้รับตัวอย่างการทำงานที่ดี - รวมถึงเขตข้อมูลอีกไม่กี่
<!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>มันมี 2 พื้นที่ที่อยู่แยกต่างหากและยังแตกต่างกันประเภทที่อยู่ ทดสอบด้วย iOS 8.1.0 และดูเหมือนว่าจะเติมทุกฟิลด์พร้อมกันเสมอในขณะที่เดสก์ท็อป Chrome เติมที่อยู่ตามที่อยู่
ดูเหมือนว่าเราจะได้รับการควบคุมเพิ่มเติมเกี่ยวกับคุณลักษณะป้อนอัตโนมัตินี้มี API ทดลองใหม่ที่มาถึง Chrome Canary ซึ่งสามารถใช้ในการเข้าถึงข้อมูลหลังจากขอให้ผู้ใช้:
http://www.chromium.org/developers/using-requestautocomplete http://blog.alexmaccaw.com/requestautocomplete
ข่าวสารใหม่โดย google:
http://googlewebmastercentral.blogspot.de/2015/03/helping-users-fill-out-online-forms.html
นี่คือคำตอบที่แท้จริง:
งานนี้: http://jsfiddle.net/68LsL1sq/1/ <label for="name">Nom</label>
นี่ไม่ใช่: http://jsfiddle.net/68LsL1sq/2/ <label for="name">No</label>
ข้อแตกต่างอยู่ในฉลากเท่านั้น "Nom" มาจาก "ชื่อ" หรือ "Nome" ในภาษาโปรตุเกส
ดังนั้นนี่คือสิ่งที่คุณต้องการ:
<label for="id_of_field">Name</label><input id="id_of_field"></input>ไม่มีอะไรเพิ่มเติม
นี่คือรายการใหม่ของ "ป้อนชื่ออัตโนมัติ" ของ Google มีชื่อที่รองรับทั้งหมดในภาษาที่ได้รับอนุญาตใด ๆ
Google ได้จัดทำเอกสารสำหรับสิ่งนี้:
ช่วยให้ผู้ใช้เช็คเอาต์เร็วขึ้นด้วยการป้อนอัตโนมัติ | เว็บ | นักพัฒนาของ Google
และ
สร้างฟอร์มที่น่าทึ่ง: ใช้เมทาดาทาเพื่อเปิดใช้งานการเติมข้อมูลอัตโนมัติ | เว็บ | นักพัฒนาของ Google
ในกรณีของฉัน$('#EmailAddress').attr('autocomplete', 'off');ไม่ทำงาน แต่การติดตามใน chrome รุ่น 67 โดย jQuery
$('#EmailAddress').attr('autocomplete', 'new-email');
$('#Password').attr('autocomplete', 'new-password');