Μάσκες εισόδου και έντυπα UX

1) Αρχές

1. Βοήθεια, όχι τιμωρία. Η μάσκα καθοδηγεί την είσοδο και μειώνει τα σφάλματα, αλλά δεν εμποδίζει την εκτύπωση και την εισαγωγή.
2. Απεικόνιση δεδομένων. Αποθηκεύουμε «ακατέργαστες» κανονικοποιημένες τιμές, μορφή μόνο σε UI.
3. Προβλέψιμος δρομέας. Οποιαδήποτε αυτόματη υποκατάσταση δεν «πηδά» καρέ ή σπάστε το undo/redo.
4. Τόπος και συσκευή. Πληκτρολόγια, διαχωριστές, ημερολόγιο και νομίσματα - κατά περιφέρεια και πλατφόρμα.
5. Προσβασιμότητα και προστασία της ιδιωτικής ζωής. Κείμενο + εικονίδιο/χρώμα; Αποκρύπτουμε ευαίσθητα πεδία, αλλά δεν παρεμβαίνουμε στους διαχειριστές κωδικών πρόσβασης/αυτόματη συμπλήρωση.

2) Όταν η μάσκα είναι κατάλληλη (και όταν δεν είναι)

• Μορφότυποι με σταθερή δομή: τηλέφωνο, IBAN, PAN (κάρτες), CVC, ημερομηνία, ώρα, δείκτης, OTP.
• Χρηματικά ποσά με διαχωριστές (κατά την εκτύπωση - «καθαρή» εισαγωγή, όταν θολώνει - μορφή).
• Κωδικοί (κωδικοί, promo), σταθερά μήκη.

• Ονόματα/διευθύνσεις/Email (η μάσκα περιορίζει έγκυρους χαρακτήρες/γλώσσες).
• Σύνθετα ελεύθερα πεδία (σχόλια, εταιρικές επωνυμίες).
• Εισαγωγή με δυνητικά άγνωστο μορφότυπο (διεθνείς αριθμοί χωρίς χώρα).

3) Μάσκα έναντι αυτόματης μορφής έναντι επικύρωσης

Μάσκα - υπόδειξη δομής κατά τη διάρκεια της πτήσης (αγκύλες, παύλες), δεν πρέπει να σπάσει η είσοδος/εισαγωγή.
Αυτόματη μορφή - χρήση για θολό/απώλεια εστίασης (χιλιάδες, χώροι IBAN).
Επικύρωση - λογική ορθότητας (μήκος, checksums), εμφάνιση σφαλμάτων μετά το 'blur' ή 'submit'.

Κανόνας: η μάσκα δεν αντικαθιστά την επικύρωση και η αυτόματη μορφή δεν πρέπει να αλλάζει την έννοια της καταχωρισμένης.

4) Πληκτρολόγια και χαρακτηριστικά HTML

5) Μεταφορά, αντιγραφή και κανονικοποίηση

Μην σπάσετε το cart: όταν οι χαρακτήρες αυτόματης εισαγωγής (χώροι/αγκύλες), ρυθμίστε τη θέση του δρομέα.
Αντιγραφή πάστας: κατά την εισαγωγή, καθαροί χώροι/παύλες → επικύρωση → οθόνης με μορφοποίηση.
Κανονικοποίηση: κοπή, αντικατάσταση των «καμπυλών» των χαρακτήρων ('O'→'0' δεν μπορεί να είναι!), Μετάφραση στην άνω περίπτωση για IBAN, ενοποιημένη μορφή ημερομηνίας αποθήκευσης (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) Αριθμοί, νομίσματα και τοπικές οντότητες

Εισαγωγή «όπως τυπώνεται» (ανοχή ',' ή '.' ως διαχωριστής), αποθήκευση σε μικρές μονάδες (kopecks/cents).
Τοπική χαρτογράφηση (ομαδοποίηση χιλιάδων) σε θολό/μετά την υποβολή· εστίαση, απεικόνιση της «ακατέργαστης» αξίας για ευκολία επεξεργασίας.
Προσδιορίστε ρητά το νόμισμα και καθορίστε την ακρίβεια (για παράδειγμα, 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) Ημερομηνίες και ώρες

Αν οι ντόπιοι συλλέκτες είναι άβολοι/διαφορετικοί σε πλατφόρμες - χρησιμοποιήστε ένα πλαίσιο κειμένου με μάσκα 'DD. MM. YYYY ', αλλά κρατήστε το ISO' YYYY-MM-DD '.
Έλεγχος πραγματικότητας ημερομηνίας (29. 02, εύρος), χρονοδιαγράμματα - στον εξυπηρετητή.
Προσθήκη κουμπιών «Σήμερα», «Τώρα», «Καθαρίστε».

8) Τηλέφωνα και χώρες

Δύο πεδία: χώρα (+ κωδικός) και αριθμός ή έξυπνη μάσκα για την επιλεγμένη χώρα.
Όταν εισάγετε το πλήρες '+ CC'..., συμπληρώστε αυτόματα τη χώρα.
Φυλάσσετε το E.164 ('+ CCXXXXXXX'), σε τοπικό επίπεδο με χώρους.

9) Στοιχεία πληρωμής: PAN/IBAN/CVC/ΛΗΞΗ

4-4-4-4/4 ομαδοποίηση PAN: στην τιμή - μόνο αριθμοί· Έλεγχος Luhn, δεν υπάρχουν κορμοτεμάχια/αναλύσεις με PAN.
CVC:' password' -style (κρυφό), 'autocplete =» cc-csc»', μην αποθηκεύετε σε σχέδια.
ΛΗΞΗ: 'MM/YY', αυτόματη εισαγωγή '/' μετά από 2 ψηφία, εύρος ελέγχου 01-12 και εύλογο έτος.
IBAN: άνω περίπτωση, χώροι μόνο σε UI· Check length ανά χώρα και checksum.

10) Κωδικός OTP/επιβεβαίωσης

6 (ή N) κύτταρα με αυτόματη εστίαση και αυτόματη μετάβαση, επικόλληση από το ρυθμιστικό διάλυμα αναγνωρίζει όλο τον κωδικό.
'autocplete =' one-time-code '', σε κινητά τηλέφωνα - αυτόματη εξαγωγή από SMS.
Εισαγωγή εφεδρικών χωρίς διαχωριστικά πεδία (ένα πεδίο) - για συσκευές ανάγνωσης οθόνης.

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

11) Μάσκες και a11y

Απαιτείται ετικέτα («<ετικέτα>»), ο κάτοχος θέσης είναι παράδειγμα, όχι αντικατάσταση.
Εξηγήστε τον κανόνα δίπλα-δίπλα: κείμενο βοηθού με παράδειγμα («Μορφή: + CC ХХХ ХХХ - ХХ - ХХ»).
Συσχετίζονται σφάλματα μέσω 'aria-descripedby', κρίσιμο - 'ρόλο = «συναγερμός»'.
"αντίθεση του κειμένου και του περιγράμματος ≥ AA,": ορατή εστίαση "δεν μπορεί να κρυφτεί.

12) Προστασία της ιδιωτικής ζωής και ασφάλεια

Ευαίσθητα πεδία: μην καταγράφετε, μην γράφετε σε RUM, μην αποθηκεύετε σε σχέδια (PAN, CVC, διαβατήριο).
Οι μάσκες και η μορφοποίηση δεν πρέπει να αποκαλύπτουν την εγκυρότητα του λογαριασμού («Εάν έχει καταχωριστεί ηλεκτρονικό ταχυδρομείο»... - ουδέτερη διατύπωση).
Ιδιαιτερότητα και επαναδοκιμασία για κρίσιμες υποβολές (πληρωμή/επιτόκιο).

13) Συμπεριφορά και απόδοση μορφής

Χρέωση ασύγχρονων ελέγχων (250-400 ms), ορατή ένδειξη «Έλεγχος»....
Μην κλειδώνετε ολόκληρη την οθόνη για χάρη ενός πεδίου. τοπική σπονδυλική στήλη/σκελετός.
Αλλαγές DOM παρτίδας κινείται μόνο «μετασχηματισμός/αδιαφάνεια».
Στο κινητό - αποφύγετε «άλματα» όταν εμφανίζεται το πληκτρολόγιο (ασφαλής χώρος, προβολέας meta).

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

Πληρωμές/αναλήψεις: PAN/IBAN/ποσό με μαλακές μάσκες. αυστηρή ταυτότητα και έλλειψη ευαίσθητων αρχείων καταγραφής πεδίου· συμβουλές σχετικά με τις προμήθειες και τις προθεσμίες.
KYC: μάσκες για ημερομηνίες, αριθμούς διαβατηρίου (χωρίς «σκληρό» φιλτράρισμα - λαμβάνοντας υπόψη διαφορετικές μορφές), μέγεθος/τύπος αρχείου, προεπισκόπηση.
Όρια και υπεύθυνο παιχνίδι: κατανοητά ποσά/περίοδοι (ημέρες/εβδομάδες/μήνες), βοηθοί κοντά, αντίθεση ΑΑΑ.
Στοιχήματα: γρήγορη εγγραφή του ποσού (προκαθορισμένα + πεδία), σε «ακατέργαστο» αριθμό εστίασης, όταν θολώνει το σχήμα ανά τόπο. μη εισδοχή, «..... «./διπλού διαχωριστή.

17) Αντι-μοτίβα

Σκληρές μάσκες που αρνούνται έγκυρους χαρακτήρες/εισαγωγή.
Άλμα καρέ με αυτόματη μορφή; απώλεια εξόρυξης/αναιρέσεως.
Ο κάτοχος της θέσης αντί της ετικέτας.
Αυτόματη προσθήκη νομίσματος μέσα στην τιμή (σπάει πάστα αντιγραφής).
Σφάλματα «ανά χαρακτήρα» χωρίς απομυθοποίηση.
Μορφότυποι τοπικής εξάρτησης σε αποθήκευση (αποθήκευση ISO/αριθμοί).
Καταγραφή αριθμών PAN/διαβατηρίου και παρουσίαση «πολύ ειλικρινών» λόγων απόρριψης.

18) Μετρήσεις και πειράματα

Ποσοστό σφάλματος ανά πεδίο (πριν/μετά τη μάσκα).
Time-to-Complete έντυπα και επανυποβολές.
Η αναλογία των αποτυχημένων εισόδων (αντιγραφή πάστας) και rollbacks (undo).
CTR των υποδείξεων/παραδειγμάτων, αναλογία των αυτοκόλλητων.
Ποσοστό εγκατάλειψης στο στάδιο πληρωμής/ACC.

19) Κατάλογος ελέγχου QA

Εισαγωγή και φροντίδα

• Η επικόλληση από το ρυθμιστικό διάλυμα δεν σπάει, οι χώροι/παύλες καθαρίζονται σωστά.
• Η φροντίδα παραμένει προβλέψιμη μετά την αυτόματη μορφή.

Τοπικό και μορφότυπο

• Τα ποσά επιτρέπουν ", "/". αποθήκευση σε μονάδες ελάσσονος σημασίας.
• Οι ημερομηνίες αναλύονται και επικυρώνονται. αποθήκευση σε ISO.

A11y

• Οι ετικέτες και η «aria-describy» είναι συνδεδεμένες. 'role =' alert '' for critical.
• Οι δακτύλιοι αντίθεσης και εστίασης αντιστοιχούν σε ΑΑ.

Τίτλος

• Τα ευαίσθητα πεδία δεν είναι καταγεγραμμένα/αποθηκευμένα.
• Ευεξία και επανάληψη σε κρίσιμα βήματα.

UX

• Κάτοχος θέσης - παράδειγμα, όχι επισήμανση· βοηθός κοντά.
• Οι μάσκες δεν εμποδίζουν την εκτύπωση σε κινητά τηλέφωνα. ορθά πλήκτρα («inputmode»).

20) Τεκμηρίωση στο σύστημα σχεδιασμού

: 'MaskedInpu ,' MonooInpu , 'PhuphInpu ,' OtpInpu , 'IbanInpu .
Μάρκες μάσκας (μήκη/μοτίβα), κανόνες φροντίδας/εισαγωγής, αριθμός/ημερομηνία εντοπισμού.
Οδηγοί για την προστασία της ιδιωτικής ζωής (τι να μην καταγραφεί), διαθεσιμότητα και αυτόματη μορφή έναντι θολό.
«Do/Don» με πραγματικά παραδείγματα και πριν/μετά τις μετρήσεις.

Σύντομη Περίληψη

Οι μάσκες και τα σχήματα είναι καλά όταν επιταχύνουν την είσοδο, κρατούν τα δεδομένα καθαρά και δεν παρεμβαίνουν. Μορφοποίηση προσεκτικά, ομαλοποίηση στην είσοδο, αποθήκευση σε σταθερές μορφές, συνεκτίμηση των τοπικών περιοχών και διαθεσιμότητα. Τα έντυπα στη συνέχεια γίνονται γρήγορα και απλά - ιδίως σε ευαίσθητα σενάρια πληρωμών, KYC και στοιχημάτων.