Maschere di input e modulo UX

1) Principi

1. Aiutare, non punire. La maschera guida l'input e riduce gli errori, ma non blocca la stampa e l'inserimento.
2. I dati vengono visualizzati. Memorizziamo valori «crudi» normalizzati, formattati solo in UI.
3. Puntatore prevedibile. Qualsiasi sostituzione automatica non salta caret o rompe undo/redo.
4. Locale e dispositivo. Tastiere, separatori, calendario e valute per regione e piattaforma.
5. Accessibilità e privacy. Testo + icona/colore; i campi sensibili vengono mascherati, ma non interferiscono con i gestori password/completamento automatico.

2) Quando la maschera è appropriata (e quando no)

• Formati con struttura sostenibile: telefono, BAN, PAN (mappe), CVC, data, ora, indice, OTP.
• Contanti separati (input «pulito» durante la stampa, formato del piatto).
• Codici (ref. codici, promo), lunghezze fisse.

• Nomi/indirizzi/Email (la maschera limita i caratteri/lingue validi).
• Campi liberi complessi (commenti, nomi di società).
• Input con formato potenzialmente sconosciuto (numeri internazionali senza paese).

3) Maschera vs formato automatico vs convalida

Maschera - Suggerimento struttura al volo (parentesi, difetti) non deve rompere l'input/incolla.
Formato automatico - Applica al piatto o alla perdita del fuoco (migliaia, spazi BAN).
La validazione è la logica di correttezza (lunghezza, checksum), la visualizzazione degli errori dopo blur o sottomit.

Regola: la maschera non sostituisce la validazione e il formato automatico non deve cambiare il significato dell'immissione.

4) Tastiere e attributi HTML

5) Caretto, Copipast e normalizzazione

Non rompere caret - Quando inserisci automaticamente i caratteri (spazi/parentesi), correggi la posizione del cursore.

Copipast: al momento dell'inserimento, pulire gli spazi o i difetti,

Normalizzazione: trimming, sostituzione di curve di simboli ('O'→'0' non è possibile!), traduzione in maiuscole per BAN, unico formato di data in archivio (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) Numeri, valute e locali

Immettere "come stampato" (tolleranza "," o "come separatore), memorizzare in minor units (centesimi/centesimi).
Visualizzazione locale (raggruppamento di migliaia) sul piatto/dopo la sabmite; Il focus mostra il valore «crude» per la comodità di modifica.
Indicare chiaramente la valuta e fissare la precisione (ad esempio, 2 caratteri).

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 e ore

Se i picker nativi sono scomodi o diversi sulle piattaforme, utilizzare la casella di testo con maschera DD. MM. YYYYY'ma conserva ISO YYYY-MM-DD '.
Verifica della realtà delle date (29. 02, intervalli), timeson, sul server.
Aggiungere i pulsanti Oggi, Ora, Cancella.

8) Telefoni e paesi

Due campi: paese (+ codice) e numero o maschera intelligente per paese selezionato.
Se si inserisce «+ CC...», completare automaticamente il paese.
Memorizzare E.164 ('+ CCXXXXXXXXXX') e visualizzare spazi locali.

9) Identità di pagamento: PAN/BAN/CVC/EXP

PAN: raggruppa il 4-4-4-4/4; il valore è solo numerico; Luhn-check; Nessun nastro/analisi con PAN.
CVC: 'password' - (nascosto), 'autocomplete =' cc-csc ', non salvare nelle bozze.
EXP: «MM/YY», inserimento automatico «/» dopo 2 cifre, controllo dell'intervallo 01-12 e dell'anno ragionevole.
BAN: upper-case, spazi solo in UI; Verifica della lunghezza nazionale e dell'importo di controllo.

10) OTR/codice di conferma

6 (o N) celle autofocus e transizione automatica, l'inserimento dal buffer riconosce l'intero codice.
«Autocomplete =» one-time-code «», «Mobile» - estrazione automatica da SMS.
Bap input senza campo split (un campo) - Per gli screener.

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

11) Maschere e a11y

L'etichetta è obbligatoria ('<label for>'), il placeholder è un esempio, non una sostituzione.
Spiega la regola accanto a helper text con esempio («Formato: + CC XXX XXX-XX-XX»).
Collegare gli errori tramite «aria-describedby», i critici sono «rolle =» alert «».

Non nascondere il contrasto tra testo e tracciati AA, 'focus-visibile'

12) Privacy e sicurezza

Campi sensibili: non logica, non scrive in RUM, non salva in bozze (PAN, CVC, passaporto).
Le maschere e la formattazione non devono rivelare la validità dell'account («Se l'email è registrato...» - termini neutrali).
Idipotenza e retry per sabmiti critici (pagamento/tasso).

13) Comportamento dei moduli e prestazioni

Controllo asincrona di debount (250-400 ms), indicatore visibile «Controlliamo»...
Non bloccare l'intero schermo per un campo; spinner/scheletro locale.
Batchettare le modifiche al DON; Animare solo «form/opacity».
Su mobile - Evita «salto» quando viene visualizzata la tastiera (safe-area, viewport meta).

14) Codice-snippet

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) Token di progettazione (esempio)

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) Specificità del iGaming

Pagamenti/conclusioni: PAN/BAN/amount con maschere morbide; Idampotenza rigorosa e mancanza di campi sensibili indizi su commissioni e tempistiche.
KYC: maschere per date, numeri di passaporto (senza filtraggio «rigido» - conteggio di formati diversi), dimensioni/tipo di file, anteprima.
Limiti e gioco responsabile: quantità/periodi comprensibili (giorni/settimane/mesi), helper accanto, contrasto AAA.
Scommesse: immissione rapida di un importo (pulsanti preimpostati + campo), numero crudo, formato locale; Non è un doppio separatore.

17) Anti-pattern

Maschere rigide che impediscono i caratteri/incolla validi.
Caret saltante in formato automatico; mancante selezione/undo.
Placeholder invece dell'etichetta.
Aggiunge valuta automatica al valore (rompe il copipast).
Errori per ogni carattere senza debount.
Formati localesipendenti nell'archivio (memorizzare i numeri ISO).
Logifica i numeri PAN/passaporti e mostra i motivi di deviazione «troppo onesti».

18) Metriche ed esperimenti

Errore rate sui campi (prima/dopo la maschera).
Time-to-Complete moduli e invii ripetuti.
Percentuale di inserzioni non riuscite (copipast) e di riparazioni (undo).
CTR suggerimenti/esempi, percentuale di completamento automatico.
Abandon rate al passo pagamento/CUS.

19) Foglio di assegno QA

Input e caret

• L'inserimento dal buffer non viene rotto, gli spazi/i difetti vengono cancellati correttamente.
• Caret rimane prevedibile dopo il formato automatico.

Locale e formato

• Gli importi sono ammessi ', '/'; archiviazione in minor units.
• Le date vengono parate e validate; archiviazione in ISO.

A11y

• etichette e "aria-describedby" sono collegate; "rolle =" alert "per le critiche.
• Il contrasto e gli anelli di fuoco corrispondono ad AA.

Protezione

• I campi sensibili non vengono logici o memorizzati nella cache.
• Idampotenza e retry sui passaggi critici.

UX

• Placeholder è un esempio, non un'etichetta; helper accanto.
• Le maschere non impediscono la stampa mobile; tastiere corrette ('inputmode').

20) Documentazione in progettazione

Компоненты: `MaskedInput`, `MoneyInput`, `PhoneInput`, `OtpInput`, `IbanInput`.
Token maschere (lunghezze/modelli), regole caret/incolla, localizzazione di numeri/date.
Guidi per la privacy (che non è logico), per la disponibilità e per il formato vs piatto automatico.
«Do/Don't» con esempi e metriche reali prima/dopo.

Breve riepilogo

Le maschere e le forme sono buone quando accelerano l'input, mantengono i dati puliti e non interferiscono. Formattare con attenzione, normalizzare l'ingresso, conservare in viste stabili, tenere conto dei punti e della disponibilità. Allora i moduli diventano veloci e comprensibili, soprattutto negli scenari sensibili di pagamento, KYC e scommesse.