Input Mask: यह क्या है, इनपुट मास्क और फ़ॉर्मेटिंग

इनपुट मास्क क्या है?

Input Mask (इनपुट मास्क) एक तंत्र है जो इनपुट डेटा के लिए एक टेम्पलेट परिभाषित करता है और टाइप करते ही टेक्स्ट को स्वचालित रूप से फ़ॉर्मेट करता है। उपयोगकर्ता केवल महत्वपूर्ण वर्ण (अंक, अक्षर) दर्ज करता है, और सिस्टम स्वचालित रूप से विभाजक जोड़ता है: स्पेस, हाइफ़न, कोष्ठक, स्लैश। यह पोस्ट-प्रोसेसिंग से मुख्य अंतर है, जहाँ इनपुट पूरा होने के बाद डेटा फ़ॉर्मेट किया जाता है।

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

NSFormatter फ़ॉर्मेटर के विपरीत, जो पहले से दर्ज डेटा के प्रदर्शन स्तर पर काम करते हैं, इनपुट मास्क इनपुट स्तर पर काम करता है: यह दर्ज किए जा रहे प्रत्येक वर्ण को नियंत्रित करता है और निर्धारित करता है कि क्या वह मास्क की वर्तमान स्थिति में स्वीकार्य है। यदि कोई वर्ण मास्क से मेल नहीं खाता है, तो उसे अस्वीकार या अनदेखा कर दिया जाता है।

Apple UX अनुसंधान (2024) के अनुसार, इनपुट मास्क उन फ़ील्ड के लिए सबसे प्रभावी हैं जहाँ उपयोगकर्ता अपरिचित फ़ॉर्मेट में डेटा दर्ज करता है। उदाहरण के लिए, SNILS (000-000-000 00) या INN (000000000000) — उपयोगकर्ता को अंकों की सटीक संख्या या विभाजकों का स्थान नहीं पता हो सकता है, और मास्क दृश्य रूप से सही फ़ॉर्मेट सुझाता है।

इनपुट मास्क सिंटैक्स

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

अनिवार्य और वैकल्पिक ब्लॉक

वर्गाकार कोष्ठक [0] एक अनिवार्य वर्ण दर्शाते हैं — उपयोगकर्ता को इस स्थिति पर एक अंक दर्ज करना होगा। घुंघराले कोष्ठक {0} एक वैकल्पिक वर्ण दर्शाते हैं — यदि उपयोगकर्ता ब्लॉक को छोड़ देता है, तो मास्क संबंधित विभाजक नहीं जोड़ता है। उदाहरण के लिए, दिनांक के लिए मास्क [00]{.}[00]{.}[0000]: यदि उपयोगकर्ता महीना दर्ज नहीं करता है, तो दिन के बाद का विभाजक भी प्रदर्शित नहीं होता है।

मास्क एफ़िक्स

वर्गाकार और घुंघराले कोष्ठकों के बाहर के स्थिर वर्ण एफ़िक्स होते हैं — वे हमेशा प्रदर्शित होते हैं, भले ही फ़ील्ड खाली हो। उदाहरण के लिए, मास्क +7 ([000]) [000]-[00]-[00] में वर्ण +7, (, ), स्पेस और हाइफ़न एफ़िक्स हैं और उपयोगकर्ता द्वारा हटाए नहीं जा सकते। एफ़िक्स उपयोगकर्ता को इनपुट शुरू करने से पहले ही अपेक्षित फ़ॉर्मेट समझने में मदद करता है।

उद्देश्य के अनुसार मास्क के प्रकार

इनपुट मास्क उस डेटा के प्रकार के अनुसार वर्गीकृत किए जाते हैं जिसके लिए वे डिज़ाइन किए गए हैं। प्रत्येक प्रकार की अपनी संरचना, समूहों की संख्या और विभाजकों का स्थान होता है। मास्क का सही चुनाव उपयोगकर्ता अनुभव के लिए महत्वपूर्ण है — यदि मास्क उपयोगकर्ता की अपेक्षाओं से मेल नहीं खाता है, तो वह स्वचालित रूप से जुड़े वर्णों को हटा देगा।

फ़ोन नंबर के लिए मास्क

फ़ोन मास्क सबसे सामान्य प्रकार हैं। रूसी नंबर +7 ([000]) [000]-[00]-[00] के रूप में फ़ॉर्मेट होता है, अमेरिकी नंबर +1 ([000]) [000]-[0000] के रूप में। मास्क को देश और शहर कोड में अंकों की विभिन्न संख्या का समर्थन करना चाहिए। InputMask लाइब्रेरी प्राथमिकता वाले मास्क का समर्थन करती है: यदि पहला मास्क उपयुक्त नहीं है (उपयोगकर्ता ने कोई अन्य देश कोड दर्ज किया है), तो दूसरा लागू होता है।

बैंक कार्ड के लिए मास्क

कार्ड नंबर के लिए मास्क [0000] [0000] [0000] [0000] का उपयोग 4 अंकों के समूहों के बीच स्पेस के साथ किया जाता है। इसके अतिरिक्त, समाप्ति तिथि [00]/[00] और CVV कोड [000] के लिए मास्क लागू किया जा सकता है। कार्ड नंबर मास्क भुगतान प्रणाली के आधार पर 16–19 अंकों का समर्थन करता है: Visa और Mastercard — 16 अंक, American Express — 15, Maestro — 12–19।

दिनांक और कोड के लिए मास्क

दिनांक मास्क विभाजक के रूप में बिंदु या स्लैश के साथ फ़ॉर्मेट [00]{.}[00]{.}[0000] का उपयोग करते हैं। INN, SNILS और अन्य पहचानकर्ताओं के लिए विशेष मास्क का उपयोग किया जाता है: INN — [000000000000] (12 अंक), SNILS — [000]-[000]-[000] [00] (हाइफ़न के साथ 11 अंक)। सत्यापन कोड के लिए — लंबाई के आधार पर [0000] या [000000]।

Swift में मास्क लागू करना

Swift में मास्क लागू करना InputMask लाइब्रेरी का उपयोग करके UITextFieldDelegate सेट करके किया जाता है। लाइब्रेरी MaskedTextFieldDelegate क्लास प्रदान करती है, जो टेक्स्ट फ़ील्ड से जुड़ती है और निर्दिष्ट मास्क के अनुसार स्वचालित रूप से इनपुट फ़ॉर्मेट करती है।

import InputMask

class PaymentViewController: UIViewController {

    @IBOutlet var cardField: UITextField!
    @IBOutlet var dateField: UITextField!
    @IBOutlet var cvvField: UITextField!

    var cardListener: MaskedTextFieldDelegate!

    override func viewDidLoad() {
        super.viewDidLoad()
        cardListener = MaskedTextFieldDelegate()
        cardListener.primaryMaskFormat = "[0000] [0000] [0000] [0000]"
        cardField.delegate = cardListener
        dateField.delegate = MaskedTextFieldDelegate(
            primaryMaskFormat: "[00]/[00]"
        )
        cvvField.delegate = MaskedTextFieldDelegate(
            primaryMaskFormat: "[000]"
        )
    }
}

स्वचालित देश पहचान वाले फ़ोन नंबर के लिए प्राथमिकता वाले मास्क का उपयोग करें। MaskedTextFieldDelegate मास्क की एक सरणी का समर्थन करता है: पहला उपयुक्त मास्क लागू होता है। यदि उपयोगकर्ता कोड +1 दर्ज करता है, तो अमेरिकी फ़ॉर्मेट लागू होता है, यदि +7 — रूसी फ़ॉर्मेट।

let phoneListener = MaskedTextFieldDelegate()
phoneListener.primaryMaskFormat = "+7 ([000]) [000]-[00]-[00]"
phoneListener.affinityMask = [
    "+1 ([000]) [000]-[0000]",
    "+44 [000] [000] [0000]",
    "+49 [000] [0000] [0000]"
]

वैकल्पिक ब्लॉक वाली दिनांक के लिए घुंघराले कोष्ठक का उपयोग करें। यदि उपयोगकर्ता केवल दिन दर्ज करता है, तो मास्क “21” प्रदर्शित करता है। यदि दिन और महीना दर्ज करता है — “21.07”। यदि तीनों घटक दर्ज करता है — “21.07.2026”। वैकल्पिक ब्लॉक मास्क को अनुकूली बनाते हैं और उपयोगकर्ता को वह डेटा दर्ज करने के लिए बाध्य नहीं करते जो वह प्रदान नहीं करना चाहता।

let dateListener = MaskedTextFieldDelegate(
    primaryMaskFormat: "[00]{.}[00]{.}[0000]"
)
dateField.delegate = dateListener

पेस्ट और डिलीट का प्रबंधन

सही पेस्ट प्रबंधन इनपुट मास्क लागू करने के सबसे जटिल पहलुओं में से एक है। टेक्स्ट पेस्ट करते समय (उदाहरण के लिए, क्लिपबोर्ड से कार्ड नंबर), लाइब्रेरी को पेस्ट किए गए टेक्स्ट से सभी विभाजक हटाने, केवल महत्वपूर्ण वर्ण निकालने और साफ डेटा पर मास्क लागू करने की आवश्यकता होती है। RedMadRobot का InputMask shouldChangeCharactersIn विधि के माध्यम से स्वचालित रूप से ऐसा करता है।

फ़ॉर्मेटेड टेक्स्ट पेस्ट करते समय (स्पेस या हाइफ़न के साथ), लाइब्रेरी पहले डेटा को सामान्य करती है: मास्क पैटर्न से मेल न खाने वाले सभी वर्णों को हटाती है, फिर सामान्यीकृत स्ट्रिंग पर मास्क लागू करती है। यदि पेस्ट किए गए टेक्स्ट में अमान्य वर्ण हैं (अंक मास्क में अक्षर), तो उन्हें अनदेखा कर दिया जाता है।

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

टेक्स्ट चयन और प्रतिस्थापन के लिए, मास्क को उन स्थितियों को सही ढंग से संभालना चाहिए जहाँ उपयोगकर्ता टेक्स्ट के कुछ हिस्से का चयन करता है और उसे नई सामग्री से बदल देता है। InputMask लाइब्रेरी MaskedTextFieldDelegate में modifyString विधि के माध्यम से इसका समर्थन करती है, जो प्रतिस्थापन रेंज और नई स्ट्रिंग स्वीकार करती है।

मास्क डिज़ाइन करने के सर्वोत्तम अभ्यास

मास्क डिज़ाइन यह विश्लेषण करने से शुरू होता है कि उपयोगकर्ता डेटा कैसे दर्ज करेगा। यदि अधिकांश उपयोगकर्ता फ़ॉर्मेट को कंठस्थ जानते हैं (फ़ोन नंबर), तो मास्क न्यूनतम होना चाहिए — केवल समूहों के बीच विभाजक। यदि फ़ॉर्मेट अपरिचित है (SNILS, INN), तो मास्क अधिक जानकारीपूर्ण होना चाहिए, जिसमें एफ़िक्स और लेबल हों।

बड़ी संख्या में स्थिर वर्णों वाले अत्यधिक मास्क से बचें। मास्क +7 ([000]) [000]-[00]-[00] में 10 महत्वपूर्ण वर्णों पर 7 स्थिर वर्ण हैं — यह स्वीकार्य है। लेकिन अत्यधिक विभाजकों वाला मास्क जिसे उपयोगकर्ता लगातार बायपास करता है, लाभ से अधिक हानि पहुँचाता है। यदि आप फ़ॉर्मेट के बारे में निश्चित नहीं हैं — मुफ्त इनपुट का उपयोग करें।

अंतर्राष्ट्रीय एप्लिकेशन के लिए, ध्यान रखें कि डेटा फ़ॉर्मेट विभिन्न देशों में भिन्न हो सकते हैं। अमेरिका में फ़ोन नंबर का फ़ॉर्मेट +1 (XXX) XXX-XXXX है, जबकि इटली में — +39 XXX XXX XXXX। कोड द्वारा स्वचालित देश पहचान वाले प्राथमिकता वाले मास्क का उपयोग करें, या उपयोगकर्ता को नंबर दर्ज करने से पहले देश चुनने दें।

InputMask UX परीक्षण के अनुसार, उपयोगकर्ता उन मास्क को पसंद करते हैं जो इनपुट शुरू करने से पहले फ़ॉर्मेट दिखाते हैं (प्लेसहोल्डर या एफ़िक्स के माध्यम से) और वर्ण इनपुट को अवरुद्ध नहीं करते। मास्क एक संकेत होना चाहिए, प्रतिबंध नहीं। यदि उपयोगकर्ता कोई ऐसा वर्ण दर्ज करता है जो मास्क से मेल नहीं खाता, तो बिना स्पष्टीकरण के इनपुट अवरुद्ध करने की तुलना में उसे अनुमति देना बेहतर है।