Giriş maskaları və UX formaları

1) Prinsiplər

1. Kömək edin, cəzalandırmayın. Maska giriş istiqamətləndirir və səhvləri azaldır, lakin çap və əlavəni bloklamır.
2. Verilənlər ≠ göstərilir. «Xam» normallaşdırılmış dəyərləri saxlayırıq, yalnız UI formatında.
3. Proqnozlaşdırıla bilən kursor. Hər hansı bir avtomatik modifikasiya caret «atlama» və undo/redo qırılmaz.
4. Lokal və cihaz. Klaviaturalar, ayırıcılar, təqvim və valyutalar - bölgə və platformaya görə.
5. Əlçatanlıq və gizlilik. Mətn + ikona/rəng; həssas sahələri maskalamaq, lakin parol menecerlərinə/avtomatik doldurma mane deyil.

2) Maska uyğun olduqda (və olmadıqda)

• Sabit strukturlu formatlar: telefon, IBAN, PAN (kartlar), CVC, tarix, vaxt, indeks, OTP.
• Ayırıcılarla pul məbləğləri (çap edildikdə - «təmiz» giriş, blur edildikdə - format).
• Kodlar (ref. kodlar, promo), sabit uzunluqlar.

• Adlar/ünvanlar/Email (maska icazə verilən simvolları/dilləri məhdudlaşdırır).
• Mürəkkəb boş sahələr (şərhlər, şirkət adları).
• Potensial naməlum formatla giriş (ölkəsiz beynəlxalq nömrələr).

3) Maska vs avtoformat vs validasiya

Maska - «uçuşda» strukturunun ipucu (mötərizələr, defislər); giriş/insert pozmamalıdır.
Avtoformat - Blyur/fokus itkisində tətbiq olunur (minlərlə, IBAN boşluqları).
Validasiya - düzgünlüyün məntiqi (uzunluq, nəzarət məbləği), «blur» və ya «submit» -dən sonra səhvlərin göstərilməsi.

Qayda: Maska təsdiqi əvəz etmir və avtoformat daxil edilmiş mənanı dəyişdirməməlidir.

4) Klaviatura və HTML atributları

5) Karet, kopipast və normallaşma

Caret sındırmayın: simvolları avtomatik daxil edərkən (boşluqlar/mötərizələr) kursorun mövqeyini düzəldin.
Kopipast: daxil edərkən boşluqları/defisləri → valid → formatlama ilə göstərin.
Normallaşma: trimminq, «əyri» simvolların dəyişdirilməsi ('O' → '0' mümkün deyil!), IBAN üçün yuxarı registrə tərcümə, anbarda vahid tarix formatı (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) Ədədlər, valyutalar və lokallar

Giriş «necə çap olunur» (tolerans ',' və ya '.' bölücü kimi), minor units-da saxlama (qəpik/sent).
Blur/sabmitdən sonra lokal olaraq (minlərlə qruplaşma) göstərilməsi; diqqət redaktə rahatlığı üçün «xam» dəyəri göstərin.
Valyutanı açıq şəkildə göstərin və dəqiqliyi qeyd edin (məsələn, 2 işarə).

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) Tarix və vaxt

Native piker platformalarda əlverişsiz/fərqli olarsa, 'DD maskası ilə mətn sahəsi istifadə edin. MM. YYYY ', lakin ISO' YYYY-MM-DD 'saxlayın.
Tarixlərin reallığının yoxlanılması (29. 02, diapazonlar), taymzonlar - serverdə.
«Bu gün», «İndi», «Təmizlə» düymələrini əlavə edin.

8) Telefonlar və ölkələr

İki sahə: ölkə (+ kod) və nömrə və ya seçilmiş ölkə üzrə «ağıllı» maska.
Tam '+ CC...' daxil etdikdə ölkəni avtomatik doldurun.
E.164 saxlayın ('+ CCXXXXXXXX'), boşluqlarla yerli olaraq göstərin.

9) Ödəniş rekvizitləri: PAN/IBAN/CVC/EXP

PAN: qrup 4-4-4-4/4; mənasında - yalnız rəqəmlər; Luhn-check; PAN ilə heç bir log/analitik.
CVC: 'password' -stil (gizli), 'autocomplete =' cc-csc '', layihələrə daxil edilmir.
EXP: 'MM/YY', auto-insert '/' 2 rəqəmdən sonra, 01-12 diapazonunun və ağlabatan ilin yoxlanılması.
IBAN: upper-case, boşluqlar yalnız UI; ölkə üzrə uzunluğu və nəzarət məbləğinin yoxlanılması.

10) OTR/təsdiq kodu

Avtomatik fokus və avtomatik keçid ilə 6 (və ya N) hüceyrə, bufer daxil bütün kodu tanıyır.
' autocomplete =» one-time-code»', mobil telefonlarda - SMS-dən avtomatik müalicə.
Split sahələri olmayan (bir sahə) arxa giriş - skrinriders üçün.

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

11) Maska və a11y

Etiket tələb olunur ('<label for>'), placeholder əvəzedici deyil, nümunədir.
Qaydanı yaxınlıqda izah edin: nümunə ilə helper text («Format: + CC XXX XXX-XX-XX»).
Səhvləri 'aria-describedby', kritik - 'role =' alert 'vasitəsilə bağlayın.
Mətn və kontur kontrastı ≥ AA, ': focus-visible' gizlədilməməlidir.

12) Gizlilik və təhlükəsizlik

Həssas sahələr: RUM-da yazmayın, yazmayın, layihələr (PAN, CVC, pasport).
Maskalar və formatlaşdırma hesabın etibarlılığını açıqlamamalıdır («Əgər email qeydiyyatdan keçibsə...» - neytral ifadə).
Kritik submitlər üçün idempotentlik və retry (ödəniş/bahis).

13) forma davranış və performans

Debounce asinxron yoxlamalar (250-400 ms), görünən göstərici «Check»....
Bir sahə üçün bütün ekranı bloklamayın; lokal spinner/skelet.
DOM dəyişikliyini qəbul edin; yalnız 'transform/opacity' animasiya edin.
Mobil telefonlarda - klaviatura (safe-area, viewport meta) görünəndə «sıçrayışlardan» çəkinin.

14) Snippet kodu

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) Dizayn sistemi tokenləri (nümunə)

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 xüsusiyyətləri

Ödənişlər/nəticələr: Yumşaq maskalarla PAN/IBAN/amount; ciddi idempotentlik və həssas sahələrin log olmaması; komissiyalar və şərtlər haqqında ipuçları.
KYC: tarixlər, pasport nömrələri üçün maskalar («sərt» filtrasiya olmadan - müxtəlif formatların uçotu), ölçüsü/fayl növü, əvvəlcədən baxış.
Limitlər və məsuliyyətli oyun: başa düşülən məbləğlər/dövrlər (günlər/həftələr/aylar), yaxınlıqdakı köməkçilər, AAA kontrastı.
Dərəcələr: məbləğin sürətli daxil edilməsi (düymələr-presetlər + sahə), «xam» nömrə fokusunda, blur formatında lokal; «, «...../ikiqat ayırıcı.

17) Anti-nümunələr

Icazə verilən simvolları qadağan edən sərt maskalar.
Avtomatik formatda atlama caret; ifrazat itkisi/undo.
Placeholder etiket əvəzinə.
Dəyərlərin içərisinə valyutanın avtomatik əlavə edilməsi (kopipast qırır).
Debauns olmadan «hər simvol üçün» səhvlər.
Anbarda müstəqil formatlar (ISO/ədədləri saxlayın).
PAN/pasport nömrələrini daxil etmək və «çox dürüst» sapma səbəblərini göstərmək.

18) Metriklər və təcrübələr

Error rate (maskadan əvvəl/sonra).
Time-to-Complete formaları və təkrar göndərmə.
Uğursuz əlavələr (kopipast) və «geri qaytarmalar» (undo) payı.
CTR ipuçları/nümunələri, avtomatik doldurma payı.
Abandon rate ödəniş mərhələsində/KUS.

19) QA-çek siyahısı

Giriş və caret

• Buffer insert qırılmaz, boşluqlar/defislər düzgün təmizlənir.
• Caret avtomatik formatdan sonra proqnozlaşdırıla bilən olaraq qalır.

Lokal və format

• Məbləğlər icazə ', '/'.'; minor units saxlamaq.
• Tarixlər pars və təsdiqlənir; ISO saxlama.

A11y

• Etiketlər və 'aria-describedby' bağlı; 'role =' alert 'kritik üçün.
• Kontrast və fokus-ring AA uyğun gəlir.

Təhlükəsizlik

• Həssas sahələr giriş/cache deyil.
• Kritik addımlarda idempotentlik və retry.

UX

• Placeholder - nümunə, etiket deyil; helper yaxın.
• Maskalar mobil çap mane deyil; düzgün klaviatura ('inputmode').

20) Dizayn sistemində sənədləşmə

Компоненты: `MaskedInput`, `MoneyInput`, `PhoneInput`, `OtpInput`, `IbanInput`.
Maska tokenləri (uzunluqlar/şablonlar), caret/insert qaydaları, ədədlərin/tarixlərin lokalizasiyası.
Gizlilik, əlçatanlıq və avtoformat vs blur.
«Do/Don 't» əvvəl/sonra real nümunələri və metrik ilə.

Qısa xülasə

Maskalar və formalar daxil olmağı sürətləndirdikdə, məlumatları təmiz saxladıqda və müdaxilə etmədikdə yaxşıdır. Diqqətlə formatlayın, girişdə normallaşdırın, sabit formalarda saxlayın, lokalları və mövcudluğu nəzərə alın. Sonra formalar sürətli və anlaşıqlı olur - xüsusilə həssas ödəniş ssenarilərində, KYC və bahislərdə.