अंकों के मोबाइल-अनुकूल इनपुट + रिक्त स्थान (क्रेडिट कार्ड नंबर)

Question

मेरे पास क्रेडिट कार्ड नंबर इनपुट फ़ॉर्म है जिसका उपयोग मोबाइल और गैर-मोबाइल ब्राउज़र दोनों द्वारा किया जाएगा।

मैं संकेत देना चाहता हूं कि मोबाइल पर एक कीपैड दिखाना चाहिए, और (वैकल्पिक) रिक्त स्थान की अनुमति देना चाहिए, इसलिए या तो "4111 1234 1234 1234" या "4111123412341234" स्वीकार किया जाना चाहिए।

मैं क्या मिल गया है से, विकल्प हैं:

क) <input type="tel"/> - इस रूप में मैं (चाहते हैं वर्तमान मोबाइल ब्राउज़रों कम से कम) के साथ व्यवहार करने के लिए लगता है, लेकिन यह अर्थ की दृष्टि से गलत है।

ख) <input type="text" pattern="[\d ]*"/> या इसी तरह - iPhone recognises some patterns ([0-9]*, \d*) कीबोर्ड के साथ काम कर के रूप में है, लेकिन इस रूप में अच्छी तरह Android पर काम नहीं करता। इसके अलावा मुझे यकीन नहीं है कि आईफोन आईफोन को रिक्त स्थान की अनुमति देने के लिए एक नमप देगा, हालांकि मेरे पास अभी जांच करने के लिए आईफोन नहीं है।

सी) जावास्क्रिप्ट के साथ ब्राउज़र का पता लगाने का प्रयास करें और मोबाइल के लिए (ए) और (बी) गैर-मोबाइल के लिए प्रयास करें। Cludgy, और कोई वास्तविक लाभ (ए) पर।

<input type="number"/>Chrome at least will force such input to a number के बाद से गैर-स्टार्टर प्रतीत होता है, इसलिए रिक्त स्थान के साथ इनपुट तोड़ना।

क्या मोबाइल ब्राउज़र पर संकेत देने का एक बेहतर तरीका है कि उन्हें type="tel" का उपयोग करने से एक नमपैड प्रदान करना चाहिए?

संपादित करें:

हो सकता है कि एक -webkit-* संपत्ति है कि संकेत है कि एक numpad दिखाया जाना चाहिए एक सामान्य पाठ इनपुट क्षेत्र के लिए लागू किया जा सकता है?

Answer 1

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

यदि आप संख्याओं के चार ब्लॉक के लिए व्यक्तिगत इनपुट फ़ील्ड प्रदान करते हैं और चौथे नंबर टाइप किए जाने के बाद कर्सर को एक इनपुट फ़ील्ड से स्वचालित रूप से स्थानांतरित करने के लिए कुछ जावास्क्रिप्ट का उपयोग करते हैं, तो आप <input type="number"/> प्लस का उपयोग कर सकते हैं आईफोन उपयोगकर्ता कुंजीपटल लेआउट के बीच स्विचिंग से।

Answer 2

एक पाठ क्षेत्र है कि अभी भी खाली स्थान के और अन्य विशेष वर्ण हो सकते हैं के लिए शब्दार्थ सही मार्कअप लेकिन जहाँ तक मैं वाकिफ हूँ, जबकि inputmodeWhatWG द्वारा सिफारिश की है यह अभी तक किसी भी ब्राउज़र द्वारा समर्थित नहीं है <input type="text" inputmode="numeric"/> है। इसका उद्देश्य उपयोगकर्ता को उस डिवाइस पर एक संख्यात्मक कीपैड के साथ प्रस्तुत करना है जिसमें यह अभी भी एक टेक्स्ट इनपुट के रूप में व्यवहार करता है।

मेरा सुझाव जेएस के साथ inputmode पॉलीफिल करना होगा और टच डिवाइस पर type="tel" में बदलना होगा (जो वर्तमान में उपलब्ध सर्वोत्तम समाधान है)। सावधान रहें कि अलग-अलग उपकरणों में 'टेल' और 'नंबर' कीपैड बहुत अलग हैं, आईओएस 'टेल' रिक्त स्थान की अनुमति नहीं देता है जबकि क्रोम मोबाइल सभी प्रकार के विशेष पात्रों की अनुमति देता है। कौन जानता है कि कस्टम एंड्रॉइड कीपैड क्या करते हैं?

आप अपने खुद के polyfill निर्माण करने के लिए नहीं करना चाहते हैं आप Webshim जो अब polyfills inputmoderelease 1.14.0 के रूप में लागू कर सकते हैं।(!: यह एक ही कीपैड आप जब type="number" की स्थापना नहीं है टिप्पणी)

यहाँ विश्लेषण मैं पर किया था यह भी है आईओएस 'संख्या' कीपैड pattern="[0-9]*" की स्थापना द्वारा लागू अगर आप चाहते हैं रखने का अच्छा विशेषता यह है Polyfilling inputmode पर @और मेरे debate @aFarkas (Webshim लेखक) के साथ।