इनपुट मास्क और UX फॉर्म

1) सिद्धांत

1. मदद करो, दंडित नहीं करो। मास्क इनपुट को गाइड करता है और त्रुटियों को कम करता है, लेकिन मुद्रण और सम्मिलन को अवरुद्ध नहीं करता है।

2. डेटा ≠ प्रदर्शन। हम "कच्चे" सामान्यीकृत मूल्यों को संग्रहीत करते हैं, केवल यूआई में प्रारूप।

3. पूर्वानुमानित संकेतक। कोई भी ऑटो-प्रतिस्थापन कैरेट "जंप" नहीं करता है या पूर्ववत/फिर से तोड़ ता है।

4. लोकेल और उपकरण। क्षेत्र और मंच द्वारा कीबोर्ड, डिवाइडर, कैलेंडर और मुद्राएं।

5. पहुँच और गोपनीयता। पाठ + प्रतीक/रंग; हम संवेदनशील क्षेत्रों को मास्क करते हैं, लेकिन पासवर्ड प्रबंधकों/स्वतः पूर्ण के साथ हस्तक्षेप नहीं करते

2) जब मुखौटा उपयुक्त होता है (और जब नहीं)

• एक स्थिर संरचना के साथ प्रारूप: फोन, आईबीएएन, पैन (कार्ड), सीवीसी, तिथि, समय, सूचकांक, ओटीपी।
• विभाजक के साथ मौद्रिक मात्रा (जब मुद्रण - "स्वच्छ" इनपुट, जब धुंधला - प्रारूप)।
• कोड (Ref. कोड, प्रोमो), निश्चित लंबाई।

• नाम/पता/ईमेल (मास्क वैध अक्षरों/भाषाओं को सीमित करता है)।
• जटिल मुक्त क्षेत्र (टिप्पणियां, कंपनी के नाम
• संभावित अज्ञात प्रारूप के साथ इनपुट (देश के बिना अंतर्राष्ट्रीय सं

3) मास्क बनाम ऑटो प्रारूप बनाम सत्यापन

मास्क - ऑन-द-फ्लाई संरचना संकेत (कोष्ठक, हाइफ़न्स); इनपुट/सम्मिलन को तोड़ ना जरूरी नहीं है।

ऑटो-प्रारूप - धब्बा/फोकस के नुकसान के लिए उपयोग करें (हजारों, IBAN रिक्त स्थान)।

सत्यापन - शुद्धता तर्क (लंबाई, चेकसम), 'धुंधला' या 'जमा करें' के बाद त्रुटियों को दर्शाता है।

नियम: मास्क सत्यापन को प्रतिस्थापित नहीं करता है, और स्वतः-प्रारूप को दर्ज किए गए का अर्थ नहीं बदलना चाहिए।

4) एचटीएमएल कीबोर्ड और विशेषताएं

5) कैरिज, कॉपी पेस्ट और सामान्यीकरण

कैरेट न तोड़ें: जब स्वतः सम्मिलित अक्षर (रिक्त स्थान/कोष्ठक), संकेतक स्थिति समायोजित करें.

पेस्ट नक़ल करें: जब सम्मिलित किया जाता है, स्पष्ट रिक्त स्थान/हाइफ़न्स फॉर्मेटिंग के साथ प्रदर्शित करें।

सामान्यीकरण: ट्रिमिंग, वर्णों के "घटता" का प्रतिस्थापन ('O'→'0' नहीं हो सकता है!), IBAN के लिए ऊपरी मामले में अनुवाद, एकीकृत भंडारण तिथि प्रारूप (आईएसओ)।

js const clean = s => s. replace(/[^\da-zA-Z]/g,'');
const normalizePAN = s => clean(s). slice (0.19) ;//no spaces/hyphens const normalizeIBAN = s => clean (s). toUpperCase();   // A–Z0–9

6) संख्या, मुद्राएँ और स्थान

इनपुट "मुद्रित" (सहिष्णुता ',' या 'विभाजक के रूप में), छोटी इकाइयों (कोपेक/सेंट) में भंडारण।

लोकेल मैपिंग (हजारों का समूह) ब्लर/सबमिशन के बाद; फोकस में, संपादन में आसानी के लिए "कच्चा" मूल्य दिखाएं।

स्पष्ट रूप से मुद्रा निर्दिष्ट करें और सटीकता को ठीक करें (उदाहरण के लिए, 2 वर्ण)।

js function parseMoney(input) {
//resolve both comma and period as decimal const s = input. replace(/\s/g,''). replace(',', '.');
const num = Number(s);
if (Number. isNaN(num)) return null;
return Math. round(num 100); // cents
}

function formatMoney(cents, locale='ru-RU', currency='RUB') {
return (cents/100). toLocaleString(locale, { style:'currency', currency });
}

7) दिनांक और समय

यदि देशी पिकर प्लेटफार्मों पर असहज/अलग हैं - एक 'डीडी मास्क के साथ एक पाठ बॉक्स का उपयोग करें। MM. YYYY ', लेकिन ISO' YYYYY-MM-DD 'रखें।

दिनांक वास्तविकता जांच (29। 02, रेंज), टाइमज़ोन - सर्वर पर।

बटन जोड़ें "आज", "अब", "स्पष्ट करें।"

8) फोन और देश

दो क्षेत्र: देश (+ कोड) और चयनित देश के लिए संख्या या स्मार्ट मास्क।

पूर्ण '+ CC...' डालते समय, देश को स्वतः पूर्ण करें।

स्टोर E.164 ('+ CCXXXXXXXX'), स्थानीय रूप से रिक्त स्थान के साथ दिखाएँ.

9) भुगतान विवरण: PAN/IBAN/CVC/EXP

पैन: 4-4-4-4/4 समूह; मान में - केवल संख्या; लुह्न-जाँच; पैन के साथ कोई लॉग/एनालिटिक्स नहीं।

CVC:' पासवर्ड' -स्टाइल (छिपा हुआ), 'स्वतः पूर्ण =" cc-csc", ड्राफ्ट में सहेजें नहीं.

EXP: 'MM/YY', 2 अंकों के बाद ऑटो-इंसर्ट '/', रेंज 01-12 और उचित वर्ष की जाँच करें।

IBAN: ऊपरी मामला, केवल UI में रिक्त स्थान; देश और चेकसम द्वारा लंबाई जाँचें।

10) ओटीपी/पुष्टि कोड

6 (या एन) ऑटोफोकस और ऑटो-संक्रमण वाली कोशिकाएं, बफर से चिपकाना सभी कोड को पहचानता है।

मोबाइल फोन पर' autocomplete =" वन-टाइम-कोड"' - एसएमएस से ऑटो-निष्कर्षण।

स्क्रीन पाठकों के लिए विभाजित फ़ील्ड (एक फ़ील्ड) के बिना बैकअप इनपुट।

html
<div class="otp" role="group" aria-label="Код из SMS">
<input inputmode="numeric" maxlength="1">
<input inputmode="numeric" maxlength="1">
<!-- … -->
</div>

11) मास्क और a11y

लेबल आवश्यक है ('<लेबल फॉर>'), प्लेसहोल्डर एक उदाहरण है, प्रतिस्थापन नहीं।

नियम को कंधे से कंधा मिलाकर समझाएं: उदाहरण के साथ सहायक पाठ ("प्रारूप: + CC - ")।

'आरिया-विवरण', महत्वपूर्ण - 'भूमिका = "अलर्ट" के माध्यम से सहयोगी त्रुटियां।

पाठ और आकृति के विपरीत ≥ एए, ': फोकस-दृश्यमान' को छिपाया नहीं जा सकता है।

12) गोपनीयता और सुरक्षा

संवेदनशील क्षेत्र: लॉग न करें, RUM को न लिखें, ड्राफ्ट (PAN, CVC, पासपोर्ट) में सहेजें न।

मास्क और प्रारूपण खाते की वैधता को प्रकट नहीं करना चाहिए ("यदि ईमेल पंजीकृत है"... - तटस्थ शब्द)।

महत्वपूर्ण सबमिट (भुगतान/दर) के लिए पहचान और पुन: प्रयास।

13) फॉर्म व्यवहार और प्रदर्

अतुल्यकालिक चेक (250-400 एमएस) का डेबिट, दृश्यमान संकेत "चेक"...।

एक क्षेत्र के लिए पूरे स्क्रीन को लॉक न करें; स्थानीय स्पिनर/कंकाल।

बैच डोम परिवर्तन; केवल 'परिवर्तन/अपारदर्शिता' को चेतन करें।

मोबाइल पर - कीबोर्ड दिखाई देने पर "कूदने" से बचें (सुरक्षित क्षेत्र, व्यूपोर्ट मेटा)।

14) कोड-स्निपेट्स

js function formatPhoneVisible(value) {
const d = value. replace(/\D/g,''). slice(0,15);
if (!d) return '';
if (d. startsWith('7')          d. startsWith('8')) {
return d. replace(/^([78])? (\d{3})(\d{3})(\d{2})(\d{2})./, '+7 ($2) $3-$4-$5');
}
// generic E.164 grouping: +CC XXX XXX XX XX return d. replace(/^(\d{1,3})(\d{0,3})(\d{0,3})(\d{0,2})(\d{0,2})./, (m,c1,c2,c3,c4,c5)=>
`+${c1}${c2?` ${c2}`:''}${c3?` ${c3}`:''}${c4?` ${c4}`:''}${c5?` ${c5}`:''}`.trim());
}

const input = document. querySelector('#phone');
input. addEventListener('input', e => {
const raw = e. target. value;
const pos = e. target. selectionStart;
const digitsBefore = raw. slice(0,pos). replace(/\D/g,''). length;
const cleaned = raw. replace(/[^\d+]/g,'');
const visible = formatPhoneVisible(cleaned);
e. target. value = visible;
// restore caret by counting digits let p = 0, count = 0;
while (p < e. target. value. length && count < digitsBefore) { if (/\d/.test(e. target. value[p])) count++; p++; }
e. target. setSelectionRange(p, p);
});

js const amount = document. getElementById('amount');
let cents = null;

amount. addEventListener('focus', () => {
if (cents!=null) amount. value = String(cents/100). replace('.', ',');
});
amount. addEventListener('blur', () => {
const v = parseMoney(amount. value) ;//from section 6 if (v = = null) return; cents = v;
amount. value = formatMoney(cents, 'ru-RU', 'RUB');
});

js const iban = document. getElementById('iban');
iban. addEventListener('input', () => iban. value = iban. value. toUpperCase());
iban. addEventListener('blur', () => {
const raw = normalizeIBAN(iban. value);
iban. dataset. raw = raw ;//for iban submission. value = raw. replace(/(.{4})/g,'$1 '). trim () ;//view only
});

15) डिजाइन प्रणाली टोकन (उदाहरण)

json
{
"input": {
"radius": 10,
"height": { "sm": 36, "md": 40, "lg": 48 },
"gap": 8,
"icon": 16
},
"mask": {
"debounceMs": 300,
"otpLength": 6,
"moneyPrecision": 2,
"phoneMaxDigits": 15
},
"a11y": {
"focusRing": { "width": 2, "offset": 2 },
"contrastAA": true
}
}

css
.input { height:40px; padding:0 12px; border-radius:10px; }
.input:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
.field-error { color: var(--role-danger); font-size:.875rem; margin-top:6px; }
.otp input { width:40px; text-align:center; }

16) iGaming की बारीकियाँ

भुगतान/निकासी: नरम मुखौटे के साथ पैन/आईबीएएन/राशि; सख्त पहचान और संवेदनशील क्षेत्र लॉग की कमी; कमीशन और समय सीमा के बारे में सुझाव।

KYC: तारीखों के लिए मुखौटे, पासपोर्ट नंबर ("हार्ड" फ़िल्टरिंग के बिना - विभिन्न प्रारूपों को ध्यान में रखते हुए), फ़ाइल आकार/प्रकार, पूर्वावलोकन।

सीमाएं और जिम्मेदार नाटक: समझने योग्य मात्रा/अवधि (दिन/सप्ताह/महीने), पास के सहायक, एएए विपरीत।

दांव: राशि (प्रीसेट + फील्ड) की त्वरित प्रविष्टि, फोकस "कच्चे" संख्या में, जब लोकेल द्वारा धुंधला प्रारूप; गैर-प्रवेश, "..... "/डबल विभाजक का।

17) एंटी-पैटर्न

हार्ड मास्क जो वैध अक्षरों/प्रविष्टि को अस्वीकार करता है।

ऑटो प्रारूप के साथ कूदना कैरेट; निष्कर्षण/पूर्ववत का नुकसान।

लेबल के बजाय प्लेसहोल्डर।

मूल्य के अंदर स्वचालित जोड़ मुद्रा (कॉपी पेस्ट तोड़ ता है)।

डिबंकिंग के बिना त्रुटियां "प्रति वर्ण"।

भंडारण में स्थानीय निर्भर प्रारूप (आईएसओ/संख्या स्टोर करें)।

पैन/पासपोर्ट नंबर लॉग करना और अस्वीकृति के लिए "बहुत ईमानदार" कारण दिखाना।

18) मेट्रिक्स और प्रयोग

क्षेत्रों द्वारा त्रुटि दर (मास्क से पहले/बाद में)।

समय-से-पूर्ण रूप और पुनरुत्थान।

असफल आवेषण (कॉपी पेस्ट) और रोलबैक (पूर्ववत) का अनुपात।

संकेतों/उदाहरणों का सीटीआर, स्वतः पूर्णता का अनुपात।

भुगतान चरण/एसीसी में परित्याग दर।

19) क्यूए चेकलिस्ट

इनपुट और कैरेट

• बफर से पेस्ट करना टूटता नहीं है, रिक्त स्थान/हाइफ़न को सही ढंग से साफ किया जाता है।
• ऑटो-प्रारूप के बाद कैरेट अनुमानित रहता है।

लोकेल और प्रारूप

• मात्रा ', '/' की अनुमति देती है; लघु इकाइयों में भंडारण।
• तारीखें पार्स और मान्य हैं; आईएसओ में भंडारण।

A11y

• लेबल और 'आरिया-वर्णन' जुड़े हुए हैं; महत्वपूर्ण के लिए 'रोल = "अलर्ट"।
• कंट्रास्ट और फोकस रिंग एए के अनुरूप हैं।

सुरक्षा

• संवेदनशील क्षेत्र लॉग/कैश नहीं हैं।
• आइडेम्पोटेंसी और महत्वपूर्ण कदमों पर फिर से कोशिश करें।

UX

• प्लेसहोल्डर - उदाहरण, लेबल नहीं; पास में सहायक।
• मास्क मोबाइल फोन पर मुद्रण को रोकते नहीं हैं; सही कीबोर्ड ('इनपुटमोड')।

20) डिजाइन प्रणाली में प्रलेखन

Компоненты: 'MaskyInput', 'MoneyInput', 'PhoneInput', 'OtpInput', 'IBanInput'।

मास्क टोकन (लंबाई/पैटर्न), कैरेट/सम्मिलित नियम, संख्या/तिथि स्थानीयकरण।

गोपनीयता के लिए गाइड (लॉग नहीं करने के लिए), उपलब्धता और ऑटो-प्रारूप बनाम धुंधला।

वास्तविक उदाहरणों के साथ और मैट्रिक्स से पहले/बाद में "करो/मत"।

संक्षिप्त सारांश

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