मोबाइल ओएस और ब्राउज़रों के लिए इनपुटमोड विशेषता की विशेषताएं

नमस्कार, हेब्र! मैं आपके लिए क्रिश्चियन ऑलिफ द्वारा "सब कुछ आप कभी भी इनपुटमोड के बारे में जानना चाहता हूं" लेख का अनुवाद प्रस्तुत करता हूं।

अनुवादक का ध्यान दें: लेख का मूल शीर्षक "सब कुछ जिसे आप इनपुटमोड के बारे में जानना चाहते थे" को "मोबाइल ओएस और ब्राउज़रों के लिए इनपुटमोड विशेषता की विशेषताएं" में बदल दिया गया है, क्योंकि दूसरा और अधिक सटीक रूप से सार को बताता है।

वैश्विक इनपुटमोड विशेषता एक ऑन-स्क्रीन कीबोर्ड वाले उपकरणों के लिए ब्राउज़र को बताती है जो उपयोगकर्ता द्वारा इनपुट या टेक्स्टारिया तत्व का चयन करने पर विकल्प दिखाता है।

<input type="text" inputmode="" /> <textarea inputmode="" /> 

प्रपत्र के प्रकार को बदलने के विपरीत, इनपुटमोड उस तरीके को नहीं बदलता है जिसमें ब्राउज़र इनपुट की व्याख्या करता है - यह ब्राउज़र को निर्देश देता है कि किस कीबोर्ड को प्रदर्शित करना है।

इनपुटमोड विशेषता का एक लंबा इतिहास रहा है, लेकिन हाल ही में इसे अग्रणी मोबाइल ब्राउज़रों द्वारा अपनाया गया: सफारी फॉर आईओएस एंड क्रोम फॉर एंड्रॉइड। पहले, इसे 2012 में एंड्रॉइड के लिए फ़ायरफ़ॉक्स में लागू किया गया था, लेकिन बाद में, कुछ महीनों के बाद, इसे हटा दिया गया था (हालांकि यह अभी भी ध्वज के माध्यम से उपलब्ध है)। लगभग छह साल बाद, एंड्रॉइड के लिए क्रोम ने इस संपत्ति का निर्माण किया, और आईओएस 12.2 की नवीनतम रिलीज के साथ, सफारी भी इसका समर्थन करता है।

ब्राउज़र विशेषता समर्थन यहां देखा जा सकता है । नंबर ब्राउज़र संस्करण को इंगित करते हैं।

इससे पहले कि हम नीचे की रेखा में उतरें, हमें ध्यान रखना चाहिए कि WHATWG लिविंग स्टैंडर्ड इनपुटमोड डॉक्यूमेंटेशन प्रदान करता है, जबकि W3C 5.2 कल्पना में अब यह शामिल नहीं है। चूंकि WHATWG दस्तावेज़ की विशेषता बताता है, और ब्राउज़र इसके समर्थन पर काम कर रहे हैं, हम WHATWG की तकनीकी विशेषताओं को एक मानक के रूप में मानेंगे।
इनपुटमोड कई मान लेता है। आइए एक बार में उन्हें देखें।

#None

 <input type="text" inputmode="none" /> 

आइए इसके साथ शुरू करें, क्योंकि शायद हमें किसी कीबोर्ड की जरूरत नहीं है। इनपुटमोड = "कोई नहीं" का उपयोग करना Android के लिए Chrome में कीबोर्ड नहीं दिखाएगा। iOS 12.2 डिफ़ॉल्ट रूप से अपने अल्फ़ान्यूमेरिक कीबोर्ड को प्रदर्शित करेगा, इसलिए इस मामले में कोई भी एक रीसेट की तरह iOS के लिए कुछ भी नहीं हो सकता है।

#Numeric

 <input type="text" inputmode="numeric" /> 

यह शायद सबसे आम इनपुटमोड मूल्यों में से एक है, क्योंकि यह इनपुट फ़ील्ड के लिए आदर्श है, जिसके लिए केवल नंबर की आवश्यकता होती है - उदाहरण के लिए, पिन कोड, ज़िप कोड, क्रेडिट कार्ड नंबर आदि। टाइप = "टेक्स्ट" के साथ संख्यात्मक का उपयोग करना टाइपिंग इनपुट की तुलना में अधिक अर्थ बना सकता है = "संख्या" क्योंकि इनपुटमोड = "न्यूमेरिक" का उपयोग अधिकतम गति, मीनलॉग्रफी और पैटर्न विशेषताओं के साथ किया जा सकता है, जिससे यह विभिन्न अवसरों के लिए अधिक बहुमुखी हो जाता है।

मैंने अक्सर संख्यात्मक कीपैड प्रदर्शित करने के लिए विदेशी भाषा में टाइप = "टेल" का उपयोग करने वाली साइटें देखीं। इसे वर्कअराउंड माना जाता है, लेकिन शब्दार्थ गलत है।

याद रखें कि इनपुटमॉड पैटर्न विशेषता का समर्थन करता है, हम उसी प्रभाव के लिए इनपुट में पैटर्न = "डी *" जोड़ सकते हैं। इसका उपयोग करें यदि आप सुनिश्चित हैं कि इनपुट को केवल नंबरों को दर्ज करने की अनुमति देनी चाहिए, क्योंकि एंड्रॉइड (आईओएस के विपरीत) उपयोगकर्ता को पत्रों के साथ कीबोर्ड का उपयोग करने की अनुमति नहीं देता है, जो गलती से वैध डेटा दर्ज करने में हस्तक्षेप कर सकता है।

#Tel

 <input type="text" inputmode="tel" /> 

मानक अल्फ़ान्यूमेरिक कीपैड का उपयोग करके फ़ोन नंबर दर्ज करना मुश्किल हो सकता है। टेलीफोन कीपैड पर, एक नंबर (1 और 0 को छोड़कर) वाला प्रत्येक बटन तीन अक्षरों का प्रतिनिधित्व करता है (उदाहरण के लिए, 2 ए, बी और सी का प्रतिनिधित्व करता है) जो एक ही कुंजी पर स्थित हैं। अल्फ़ान्यूमेरिक कीपैड इन अक्षरों को संदर्भित नहीं करता है, इसलिए एक टेलीफोन नंबर युक्त अक्षरों को डिकोड करना (उदाहरण के लिए, 1-800-कोल्ट) को अतिरिक्त संसाधनों की आवश्यकता होती है।

टेलीमोड पर स्विच करने के साथ इनपुटमोड का उपयोग करना एक मानक टेलीफोन कीपैड प्रदर्शित करता है, जिसमें 0 से 9 तक के नंबरों के लिए बटन, पाउंड संकेत और तारांकन शामिल हैं। इसके अलावा हमारे पास वर्णानुक्रमिक वर्णसूचक वर्ण होंगे (उदाहरण के लिए, एबीसी)।

#Decimal

 <input type="text" inputmode="decimal" /> 

दशमलव पर स्विच करने के साथ इनपुटमोड फ़ील्ड iOS के लिए छोटे बदलावों की ओर ले जाती है, जहां कीबोर्ड टेली के मामले में समान दिखता है, लेकिन संकेत + * # को दशमलव बिंदु द्वारा प्रतिस्थापित किया जाता है। एंड्रॉइड सिर्फ संख्यात्मक कीपैड का उपयोग करेगा।

#email

 <input type="text" inputmode="email" /> 

मुझे यकीन है कि आपने एक फॉर्म भर दिया था जिसमें ईमेल पते की आवश्यकता थी, जिसने कीबोर्ड को केवल @ प्रतीक तक पहुंचने के लिए स्विच करने के लिए मजबूर किया। यह घातक नहीं है, लेकिन निश्चित रूप से बहुत सुविधाजनक नहीं है। यह वह जगह है जहाँ ईमेल मूल्य काम में आता है। यह @ प्रतीक और दशमलव बिंदु जोड़ता है।

ऐसा कीबोर्ड उन लोगों के लिए उपयोगी हो सकता है जिन्हें ट्विटर पर उपयोगकर्ता नाम दर्ज करने की आवश्यकता है, क्योंकि @ इस सामाजिक नेटवर्क में उपयोगकर्ताओं की पहचान करने के लिए मुख्य चरित्र है। इसका उपयोग करने का एक अन्य कारण यह हो सकता है कि यदि आपके पास ईमेल की जाँच करने के लिए अपनी स्वयं की स्क्रिप्ट है और आप ब्राउज़र में निर्मित सत्यापन फ़ंक्शन का उपयोग नहीं करना चाहते हैं।

#URL

 <input type="text" inputmode="url" /> 

URL मान एक एकल बटन दबाकर डोमेन नाम एक्सटेंशन (उदाहरण के लिए, .com) जोड़ना आसान बनाता है; ऐसे बटन भी हैं जो आमतौर पर वेब पते के लिए उपयोग किए जाते हैं, उदाहरण के लिए, अक्षर (?) और (/)। कीबोर्ड पर दिखाया गया एक्सटेंशन उपयोगकर्ता प्रविष्टि में जोड़ा जाता है।

ऐसा कीबोर्ड उपयोगकर्ताओं को दिखाने के लिए उपयोगी हो सकता है कि आपका इनपुट क्षेत्र डोमेन नाम (साइट डॉट कॉम) के साथ-साथ पूरी तरह से योग्य डोमेन पते (https://site.com) को स्वीकार करता है।
यदि आपके इनपुट फ़ील्ड में प्रवेश किए गए वर्णों के सत्यापन की आवश्यकता है, तो टाइप = "url" का उपयोग करें।

#search

 <input type="text" inputmode="search" /> 

यह मान iOS पर नीला गो बटन और एंड्रॉइड पर ग्रीन एंटर दोनों को रिटर्न के स्थान पर प्रदर्शित करता है। जैसा कि आप नाम से अनुमान लगा सकते हैं, खोज का उपयोग खोज रूपों के लिए किया जाता है, एक क्वेरी बनाने के लिए एक कुंजी प्रदान करता है।

यदि आप आईओएस में एंटर के बजाय सर्च दिखाना चाहते हैं और हरे रंग के तीर के बजाय एंड्रॉइड पर ग्लास आइकन बढ़ाना चाहते हैं, तो टाइप करें = "खोज"।

# आपको और क्या जानने की जरूरत है

• एंड्रॉइड पर क्रोमियम-आधारित ब्राउज़र, जैसे कि माइक्रोसॉफ्ट एज, ब्रेव और ओपेरा, क्रोम के समान ही इनपुटमोड व्यवहार है।
  
• मैंने संक्षिप्तता के कारणों के लिए iPad पर कीबोर्ड को नहीं छुआ। वे iPhone के समान हैं, केवल अधिक बटन शामिल हैं। एंड्रॉइड टैबलेट के लिए भी यही सच है, तीसरे पक्ष के कीबोर्ड के अपवाद के साथ, जो एक अलग विषय हो सकता है जो हाइलाइट करने लायक है।
  
• प्रारंभ में, प्रस्तावित विनिर्देशन में जापानी इनपुट के लिए काना और कटकाना अर्थ थे, लेकिन उन्हें कभी भी किसी भी ब्राउज़र में लागू नहीं किया गया था और इसलिए उन्हें बंद कर दिया गया था।
  
• लैटिन-नाम भी मूल रूप से इनपुटमोड मूल्यों में से एक था और इसे हटा दिया गया था। दिलचस्प बात यह है कि यदि आप इसे अभी आईओएस सफारी में उपयोग करते हैं, तो यह कीबोर्ड के ऊपर उपयोगकर्ता नाम प्रदर्शित करेगा।