Măști de intrare și formulare UX

1) Principii

1. Ajutor, nu pedepsi. Masca ghidează intrarea și reduce erorile, dar nu blochează imprimarea și inserarea.
2. Afișarea ≠ de date. Stocăm valori normalizate „brute”, formatate numai în UI.
3. Cursor previzibil. Orice auto-substituție nu „sari” careu sau rupe anula/redo.
4. Locale și dispozitiv. Tastaturi, divizoare, calendar și valute - pe regiuni și platforme.
5. Accesibilitate și confidențialitate. Text + pictogramă/culoare; mascăm câmpurile sensibile, dar nu interferăm cu managerii de parole/autocomplete.

2) Când masca este adecvată (și când nu)

• Formate cu o structură stabilă: telefon, IBAN, PAN (carduri), CVC, data, ora, index, OTP.
• Sume monetare cu separatoare (la tipărire - intrare „curată”, când neclară - format).
• Coduri (ref. coduri, promo), lungimi fixe.

• Nume/adrese/E-mail (limite de mască caractere/limbi valide).
• Câmpuri libere complexe (comentarii, nume de companii).
• Intrare cu format potențial necunoscut (numere internaționale fără țară).

3) Mască vs format auto vs validare

Masca - pe-the-fly structura indiciu (paranteze, cratime); nu trebuie să rupă intrarea/inserția.
Format automat - utilizare pentru estomparea/pierderea focalizării (mii, spații IBAN).
Validare - logica corectitudinii (lungime, sume de control), prezentând erori după „estompare” sau „trimitere”.

Regula: masca nu înlocuiește validarea, iar formatul automat nu trebuie să schimbe sensul celui introdus.

4) tastaturi și atribute HTML

5) Transportul, copierea pastei și normalizarea

Nu rupeți careta: atunci când introduceți automat caractere (spații/paranteze), ajustați poziția cursorului.
Copiați pasta: atunci când introduceți, spații clare/cratime → valida → afișare cu formatare.
Normalizare: tundere, înlocuirea „curbelor” de caractere („O'→'0” nu poate fi!), Traducere la caz superior pentru IBAN, format data de stocare unificată (ISO).

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) Numere, valute și localuri

Intrare „ca tipărit” (toleranță „,” sau „” ca separator), stocare în unități minore (copeici/cenți).
Cartografiere locală (grupare de mii) pe blur/după depunere; în focus, arată valoarea „brută” pentru ușurința de editare.
Specificați explicit moneda și fixați acuratețea (de exemplu, 2 caractere).

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) Date și ore

Dacă alegătorii nativi sunt inconfortabili/diferiți pe platforme - utilizați o casetă de text cu mască DD. MM. AAAA „, dar păstrați ISO” AAAA-LL-ZD'.
Data reality check (29. 02, intervale), fusuri orare - pe server.
Adaugă butoanele „Today”, „Now”, „Clear”.

8) Telefoane și țări

Două câmpuri: țară (+ cod) și număr sau mască inteligentă pentru țara selectată.
Când introduceți întregul „+ CC”..., completați automat țara.
Stocați E.164 ('+ CCXXXXXXXXX'), afișați local cu spații.

9) Detalii plată: PAN/IBAN/CVC/EXP

PAN: 4-4-4-4/4 grupare; în valoare - numai numere; Luhn-check; fără jurnale/analize cu PAN.
CVC:' parola' -style (ascuns), 'autocomplete =” cc-csc”', nu salvați la ciorne.
EXP: „LL/AY”, auto-insert „/” după 2 cifre, verificați intervalul 01-12 și un an rezonabil.
IBAN: caz superior, spații numai în UI; Verificați lungimea după țară și suma de control.

10) OTP/cod de confirmare

6 (sau N) celule cu autofocus și auto-tranziție, lipirea din tampon recunoaște tot codul.
' autocomplete =” one-time-code”', pe telefoanele mobile - auto-extragere din SMS.
Intrare de rezervă fără câmpuri divizate (un câmp) - pentru cititoare de ecran.

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

11) Măști și a11y

Eticheta este necesară („<etichetă pentru>”), înlocuitorul este un exemplu, nu un înlocuitor.
Explicați regula una lângă alta: textul ajutător cu exemplu („Format: + CC ХХХ ХХХ - ХХ - ХХ”).
Asociați erorile prin 'aria-descripedby', critic - 'rol = „alertă”'.
Contrastul dintre text și contururi ≥ AA, „: focus-vizibil” nu poate fi ascuns.

12) Confidențialitate și securitate

Câmpuri sensibile: nu vă conectați, nu scrieți la RUM, nu salvați la proiecte (PAN, CVC, pașaport).
Măștile și formatarea nu trebuie să dezvăluie valabilitatea contului („Dacă e-mailul este înregistrat”... - formulare neutră).
Idempotența și încercarea din nou pentru submitturile critice (plată/rată).

13) Comportamentul și performanța formei

Debit de controale asincrone (250-400 ms), indicație vizibilă „Verificați”....
Nu blocați întregul ecran de dragul unui câmp; spinner/schelet local.
Modificări DOM în lot; anima numai 'transforma/opacitate'.
Pe mobil - evitați „salturi” atunci când apare tastatura (zona de siguranță, vizualizare meta).

14) Fragmente de cod

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) Proiectarea tokenurilor sistemului (exemplu)

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) Specificul iGaming

Plăți/retrageri: PAN/IBAN/sumă cu măști moi; idempotența strictă și lipsa jurnalelor de câmp sensibile; sfaturi despre comisioane și termene limită.
KYC: măști pentru date, numere de pașaport (fără filtrare „hard” - ținând cont de diferite formate), dimensiune/tip de fișier, previzualizare.
Limite și joc responsabil: cantități/perioade ușor de înțeles (zile/săptămâni/luni), ajutoare din apropiere, contrast AAA.
Pariuri: introducerea rapidă a sumei (presetări + câmp), în focus „raw” număr, atunci când formatul de estompare de locale; non-admitere, „..... „./de separator dublu.

17) Anti-modele

Măști dure care neagă caractere/inserții valide.
Jumping caret cu format auto; pierderea extracției/anulării.
Înlocuitor în loc de etichetă.
Auto-adăuga monedă în interiorul valorii (pauze copy paste).
Erori „per caracter” fără debunking.
Formate dependente local în stocare (stocați ISO/numere).
Înregistrarea numerelor PAN/pașaport și afișarea motivelor „prea oneste” pentru respingere.

18) Măsurători și experimente

Rata de eroare pe câmpuri (înainte/după mască).
Formulare și retransmisii time-to-complete.
Proporția de inserții eșuate (pastă de copiere) și rollback-uri (anulare).
CTR de sugestii/exemple, proporția de autocomplete.
Rata de abandon în etapa de plată/ACC.

19) Lista de verificare QA

Intrare și îngrijire

• Lipirea din tampon nu se rupe, spațiile/cratimele sunt curățate corect.
• Caret rămâne previzibil după auto-format.

Locale și format

• Sumele permit ", "/"; depozitarea în unități minore.
• Datele sunt analizate și validate; depozitare în ISO.

A11y

• Etichetele și „aria-describby” sunt conectate; 'role = „alert”' pentru critic.
• Inelele de contrast și focalizare corespund AA.

Securitate

• Câmpurile sensibile nu sunt înregistrate/cache.
• Idempotența și încercați din nou în pași critici.

UX

• Înlocuitor - exemplu, nu etichetă; ajutor în apropiere.
• Măștile nu împiedică imprimarea pe telefoanele mobile; tastaturi corecte ('inputmode').

20) Documentația în sistemul de proiectare

Компоненты: 'MaskedInput', 'MoneyInput', 'PhoneInput', 'OtpInput', 'IbanInput'.
Jetoane mască (lungimi/modele), reguli caret/insert, localizare număr/dată.
Ghiduri pentru confidențialitate (ce să nu vă conectați), disponibilitate și format automat vs blur.
„Do/Don' t” cu exemple reale și înainte/după măsurători.

Scurt rezumat

Măștile și formele sunt bune atunci când accelerează intrarea, păstrează datele curate și nu interferează. Formatați cu atenție, normalizați la intrare, depozitați în forme stabile, luați în considerare localizările și disponibilitatea. Formularele devin apoi rapide și simple - în special în scenariile de plată sensibile, KYC și pariuri.