मैं जानना चाहूंगा कि क्या किसी विशिष्ट फॉर्म के लिए क्रोम ऑटोफिल सुविधा को सक्षम करने के लिए किसी प्रकार का विशेष मार्कअप है। मुझे केवल यह अक्षम करने के तरीके के बारे में प्रश्न मिले, लेकिन मैं यह जानना चाहूंगा कि क्या मैं ब्राउज़र को यह बताने के लिए HTML कोड में किसी प्रकार का मार्कअप जोड़ सकता हूं "यह पते का इनपुट है" या "यह ज़िप कोड है फ़ील्ड "इसे सही ढंग से भरने के लिए (उपयोगकर्ता इस सुविधा को सक्रिय मान लिया गया)।"
जवाबों:
2017 के लिए अद्यतन: ऐसा लगता है कि केटी के जवाब में खदान से अधिक अद्यतन जानकारी है। भविष्य के पाठक: उसके जवाब के लिए अपना वोट दें ।
यह एक महान प्रश्न है और जिसके लिए प्रलेखन आश्चर्यजनक रूप से कठिन है। दरअसल, कई मामलों में आप पाएंगे कि क्रोम ऑटोफिल कार्यक्षमता "बस काम करता है।" उदाहरण के लिए, 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>हालांकि, यह उत्तर असंतोषजनक है, क्योंकि यह "जादू" के दायरे में समाधान छोड़ देता है। गहरी खुदाई से मुझे पता चला है कि क्रोम (और अन्य ऑटोफिल-सक्षम ब्राउज़र) मुख्य रूप से डेटा के प्रकार को निर्धारित करने के लिए प्रासंगिक सुराग पर निर्भर करते हैं जिन्हें फॉर्म तत्वों में भरा जाना चाहिए। ऐसे संदर्भीय सुराग के उदाहरणों में nameएक इनपुट तत्व, तत्व के आसपास का पाठ और किसी भी प्लेसहोल्डर पाठ शामिल हैं।
हाल ही में, हालांकि, क्रोम टीम ने स्वीकार किया कि यह एक असंतोषजनक समाधान है, और उन्होंने इस मामले में मानकीकरण के लिए दबाव डालना शुरू कर दिया है। Google वेबमास्टर्स समूह की एक बहुत ही जानकारीपूर्ण पोस्ट ने हाल ही में इस मुद्दे पर चर्चा की, जिसमें बताया गया है:
दुर्भाग्य से, अब तक वेबमास्टरों के लिए यह सुनिश्चित करना मुश्किल हो गया है कि क्रोम और अन्य फॉर्म भरने वाले प्रदाता अपने फॉर्म को सही ढंग से पार्स कर सकते हैं। कुछ मानक मौजूद हैं; लेकिन वे वेबसाइट के कार्यान्वयन पर बहुत बोझ डालते हैं, इसलिए वे व्यवहार में बहुत अधिक उपयोग नहीं किए जाते हैं।
("मानक" वे संदर्भित करते हैं, अवलेन्चिस के उत्तर में उल्लिखित युक्ति का एक और हालिया सत्यापन है )।
Google पोस्ट उनके प्रस्तावित समाधान का वर्णन करता है (जो पोस्ट की टिप्पणियों में महत्वपूर्ण आलोचना से मिलता है)। वे इस उद्देश्य के लिए एक नई विशेषता के उपयोग का प्रस्ताव देते हैं:
बस इनपुट तत्व में एक विशेषता जोड़ें, उदाहरण के लिए एक ईमेल पता फ़ील्ड जैसा दिख सकता है:
<input type=”text” name=”field1” x-autocompletetype=”email” />
... जहां x-"प्रयोगात्मक" के लिए खड़ा है और अगर यह एक मानक बन जाता है और हटा दिया जाएगा। अधिक विवरण के लिए पोस्ट पढ़ें , या यदि आप गहराई से खुदाई करना चाहते हैं, तो आपको व्हाट्सएप विकी पर प्रस्ताव का पूर्ण विवरण मिलेगा ।
अद्यतन:
जैसा कि इन व्यावहारिक जवाबों में बताया गया है , सामान्य क्षेत्रों को पहचानने / पहचानने के लिए क्रोम द्वारा उपयोग किए जाने वाले सभी नियमित अभिव्यक्ति मिल सकते हैं 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 ने वेब एप्लिकेशन विकसित करने के लिए एक बहुत अच्छा मार्गदर्शक लिखा है जो मोबाइल उपकरणों के लिए अनुकूल है। ऑटो-भरण का आसानी से उपयोग करने के लिए उनके पास प्रपत्रों पर इनपुट का नाम कैसे दिया जाए, इसका एक भाग है। Eventhough यह मोबाइल के लिए लिखा गया है, यह डेस्कटॉप और मोबाइल दोनों के लिए लागू होता है!
स्वत: पूर्ण कैसे सक्षम करें पर कुछ मुख्य बिंदु इस प्रकार हैं:
<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 (Faridabad)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अपने इनपुट टैग पर टैग का उपयोग करें, और उनके मूल्यों को एचटीएमएल कल्पना के अनुसार यहां सेट करें 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>मूल प्रपत्र टैग को "=" और विधि = "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 अलग-अलग पता क्षेत्र शामिल हैं और पते-प्रकार भी भिन्न हैं। इसका परीक्षण आईओएस 8.1.0 पर भी किया गया है और ऐसा लगता है कि यह हमेशा सभी क्षेत्रों को एक साथ भरता है, जबकि डेस्कटॉप क्रोम ऑटोफिल एड्रेस द्वारा।
ऐसा लगता है कि हम इस ऑटोफिल सुविधा के बारे में अधिक नियंत्रण प्राप्त करेंगे, क्रोम कैनरी में एक नया प्रायोगिक एपीआई आ रहा है, जिसका उपयोग इसके लिए उपयोगकर्ता से पूछने के बाद डेटा तक पहुंचने के लिए किया जा सकता है:
http://www.chromium.org/developers/using-requestautocomplete http://blog.alexmaccaw.com/requestautocomplete
गूगल द्वारा नया इन्फोस:
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>
अंतर केवल लेबल में है। पुर्तगाली में "नाम" या "नोम" से "नाम"।
तो यहाँ आप की जरूरत है:
<label for="id_of_field">Name</label><input id="id_of_field"></input>और कुछ नहीं।
यहां Google ऑटोफिल "नामों" की नई सूची दी गई है। किसी भी अनुमत भाषा में सभी समर्थित नाम हैं।
Google अब इसके लिए दस्तावेज़ प्रदान करता है:
ऑटोफिल के साथ तेजी से चेकआउट करने में उपयोगकर्ताओं की सहायता करें वेब | Google डेवलपर्स
तथा
अद्भुत फॉर्म बनाएँ: ऑटो-पूर्ण को सक्षम करने के लिए मेटाडेटा का उपयोग करें वेब | Google डेवलपर्स
मेरे मामले में, $('#EmailAddress').attr('autocomplete', 'off'); काम नहीं किया गया है। लेकिन jQuery द्वारा क्रोम वर्जन 67 पर निम्न कार्य।
$('#EmailAddress').attr('autocomplete', 'new-email');
$('#Password').attr('autocomplete', 'new-password');