Giriş maskalary we UX şekilleri

1) Ýörelgeler

1. Kömek etmek, jezalandyrmazlyk. Maska girişi ugrukdyrýar we ýalňyşlyklary peseldýär, ýöne möhüri we goýmany bloklamaýar.
2. Maglumat ≠. "Çig" kadaly bahalary saklaýarys, diňe UI-de formatlaýarys.
3. Öňünden aýdyp boljak kursor. Islendik awtomatiki çalyşma caret "bökmeýär" we undo/redo bozmaýar.
4. Lokal we enjam. Klawiatura, bölüjiler, senenama we walýutalar - sebit we platforma boýunça.
5. Elýeterlilik we gizlinlik. Tekst + nyşan/reňk; duýgur meýdanlary gizleýäris, ýöne parol dolandyryjylaryna/awto doldurmaga päsgel bermeýäris.

2) Haçan maska ýerlikli bolsa (we ýok bolsa)

• Durnukly gurluşly formatlar: telefon, IBAN, PAN (kartoçkalar), CVC, senesi, wagty, indeksi, OTP.
• Bölüjiler bilen pul mukdary (çap edilende - "arassa" giriş, blur edilende - format).
• Kodlar (ref. kodlar, mahabat), kesgitlenen uzynlyklar.

• Atlar/Salgylar/Email (maska ​ ​ rugsat edilýän nyşanlary/dilleri çäklendirýär).
• Çylşyrymly boş ýerler (teswirler, kompaniýalaryň atlary).
• Potensial näbelli format bilen giriş (ýurtsyz halkara belgileri).

3) Maska vs awtoformat vs tassyklama

Maska - gurluşyň "uçmak üçin" yşaraty (qavslar, defisler); girişi/goýmany bozmaly däldir.
Awtoformat - blur/fokus ýitirilende ulanýarys (müňlerçe, IBAN boşluklary).
Walidasiýa - dogrulygyň logikasy (uzynlygy, gözegçilik mukdary), "blur" ýa-da "submit" -den soň ýalňyşlyklary görkezmek.

Düzgün: maska tassyklamanyň ornuny tutmaýar we awtoformat girizileniň manysyny üýtgetmeli däldir.

4) Klawiatura we HTML häsiýetleri

5) Karet, kopipast we kadalaşma

Carety döwmäň: Nyşanlary awto goýanyňyzda (boşluklar/parantezler) kursoryň ýerini düzüň.
Kopipast: goýlanda boşluklardan/çyzyklardan arassalaň → tassyklaň → formatlamak bilen görkeziň.
Kadalaşma: trimming, "egri" nyşanlary çalyşmak ('O' → '0' olmaz!), IBAN üçin ýokarky registre terjime etmek, ammarda ýekeje senäniň formaty (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) Sanlar, walýutalar we lokallar

"Nädip çap edilýär" (rugsat ',' ýa-da '.' böliji hökmünde), minor units-da saklamak (teňňe/sent).
Lokal boýunça görkezmek (müňleriň toparlanmagy) blumda/sabmitden soň; redaktirlemegiň aňsatlygy üçin "çig" manyny görkeziň.
Walýutany aýdyň görkeziň we takyklygy belläň (mysal üçin 2 belgi).

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) Seneler we wagt

Eger ýerli pikerler platformalarda oňaýsyz/dürli bolsa, 'DD maskaly tekst meýdanyny ulanyň. MM. YYYY ', ýöne ISO' YYYY-MM-DD 'saklaň.
Seneleriň hakykylygyny barlamak (29. 02, diapazonlar), wagt zolaklary - serwerde.
"Şu gün", "Indi", "Arassala" düwmelerini goşuň.

8) Telefonlar we ýurtlar

Iki meýdan: ýurt (kod) we belgisi ýa-da saýlanan ýurt boýunça "akylly" maska.
Doly 'CC...' goýlanda ýurdy awto dolduryň.
E.164 saklaň ('CCXXXXXXXX'), boşluklar bilen ýerli görkeziň.

9) Töleg maglumatlary: PAN/IBAN/CVC/EXP

PAN: toparlanma 4-4-4-4/4; manysynda - diňe sanlar; Luhn-check; PAN-dan loglar/analitikler ýok.
CVC: 'password' -stil (gizlin), 'autocomplete =' cc-csc '', taslamalara ýazmaň.
EXP: 'MM/YY', awto-goşma '/' 2 sandan soň, 01-12 aralygyny we akylly ýyly barlamak.
IBAN: upper-case, boşluklar diňe UI; ýurt boýunça uzynlygy we gözegçilik mukdaryny barlamak.

10) OTR/tassyklama kody

Awtofokus we awto-geçiş bilen 6 (ýa-da N) öýjük, buferden goýmak ähli kody tanaýar.
' autocomplete =" one-time-code"', jübi telefonynda - SMS-den awtomatiki bejeriş.
Split meýdanlary bolmazdan arka giriş (bir meýdan) - ekranlar üçin.

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

11) Maskalar we a11y

Bellik hökmanydyr ('<label for>'), placeholder - çalyşmak däl-de, mysal.
Aşakdaky düzgüni düşündiriň: mysal bilen helper text ("Format: CC XXX XXX-XX-XX").
Hatalary 'aria-describedby', kritiki - 'role =' alert 'arkaly baglanyşdyryň.
Tekstiň we konturlaryň gapma-garşylygy ≥ AA, ': focus-visible' gizlenmez.

12) Gizlinlik we howpsuzlyk

Duýgur meýdanlar: RUM-a ýazmaň, ýazmaň, taslamalara (PAN, CVC, pasport) saklamaň.
Maskalar we formatlamak hasabyň dogrulygyny açmaly däldir ("Eger email hasaba alnan bolsa..." - bitarap söz).
Kritiki submitler üçin idempotentlik we retry (töleg/stawka).

13) Görnüşleriň özüni alyp barşy we öndürijiligi

Asinhron barlaglarynyň debaunsy (250-400 ms), "Barlaýarys" görünýän görkezijisi....
Bir meýdan üçin tutuş ekrany petiklemäň; ýerli spinner/skelet.
DOM üýtgeşmelerini düzüň; diňe 'transform/opacity' animasiýa ediň.
Jübi telefonlarynda - klawiatura peýda bolanda "böküşlerden" gaça duruň (safe-area, viewport meta).

14) Kod-snippetler

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) Dizaýn-ulgamyň bellikleri (mysal)

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 aýratynlyklary

Tölegler/netijeler: ýumşak maskalar bilen PAN/IBAN/amount; berk idempotentlik we duýgur meýdanlaryň ýazgylarynyň ýoklugy; komissiýalar we möhletler barada maslahatlar.
KYC: seneler, pasport belgileri üçin maskalar ("berk" süzgüçsiz - dürli formatlary hasaba almak), faýlyň ululygy/görnüşi, öňünden gözden geçirmek.
Limitler we jogapkär oýun: düşnükli toparlar/döwürler (günler/hepdeler/aýlar), helperler golaýda, kontrast AAA.
Nyrhlar: jemleri çalt girizmek (düwmeler-presetalar + meýdan), "çig" san, lokal formaty blyur; ", "...../goşa bölüji.

17) Anti-patternler

Simwollary/goýmagy gadagan edýän gaty maskalar.
Awtomatiki formatda bökmek; / undo.
Belligiň ýerine Placeholder.
Walýutany bahanyň içine awto goşmak (kopipasty döwýär).
Her simwol üçin debaunssyz ýalňyşlyklar.
Ammarda garaşsyz formatlar (ISO/sanlary saklaň).
PAN/pasport belgilerini ýazmak we ret etmegiň "gaty dogruçyl" sebäplerini görkezmek.

18) Metrikler we synaglar

Error rate (maskadan öň/soň).
Wagt-to-Complete Forms we gaýtadan ibermek.
Şowsuz goşmalaryň (kopipast) we "yzyna gaýtarmalaryň" (undo) paýy.
CTR maslahatlar/mysallar, awto doldurmalaryň paýy.
Abandon rate töleg tapgyrynda/KUS.

19) QA-çek-sanawy

Giriş we seret

• Buferden goýma bozulmaýar, boşluklar/defisler dogry arassalanýar.
• Caret awtomatiki formatdan soň öňünden aýdyp bolýar.

Lokal we format

• Pullara ýol berilýär ', '/'.'; minor units-da saklamak.
• Seneler bölünýär we tassyklanýar; ISO-da saklamak.

A11y

• Bellikler we 'aria-describedby' birikdirildi; 'role =' alert 'kritikler üçin.
• Kontrast we fokus halkasy AA-a laýyk gelýär.

Howpsuzlyk

• Duýgur meýdanlar girilmeýär/kesilmeýär.
• Kritiki ädimlerde idempotentlik we retry.

UX

• Placeholder - mysal, bellik däl; helper golaýda.
• Maskalar jübi telefonlarynda çap edilmegine päsgel bermeýär; dogry klawiatura ('inputmode').

20) Dizaýn-ulgamdaky resminamalar

Компоненты: `MaskedInput`, `MoneyInput`, `PhoneInput`, `OtpInput`, `IbanInput`.
Maskalaryň bellikleri (uzynlyklar/şablonlar), caret/goýma düzgünleri, sanlaryň/seneleriň lokalizasiýasy.
Gizlinlik boýunça (nämäni ýazmaly däl), elýeterlilik we awtoformat boýunça gaýdlar vs blur.
"Do/Don 't" hakyky mysallar we öň/soň metrikler bilen.

Gysgaça gysgaça

Maskalar we görnüşler, girişi çaltlaşdyranda, maglumatlary arassa saklanda we päsgel bermese gowy bolýar. Seresaplylyk bilen formatlaň, girelgede kadalaşdyryň, durnukly görnüşde saklaň, lokallary we elýeterliligi göz öňünde tutuň. Şonda görnüşler çalt we düşnükli bolýar - esasanam tölegleriň, KYC we stawkalaryň duýgur ssenariýalarynda.