Giriş maskeleri ve UX formları

1) İlkeler

1. Yardım edin, cezalandırmayın. Maske girişi yönlendirir ve hataları azaltır, ancak yazdırmayı ve eklemeyi engellemez.
2. Veri ≠ görüntülenir. "Ham" normalleştirilmiş değerleri saklıyoruz, yalnızca UI'de biçimlendiriyoruz.
3. Tahmin edilebilir imleç. Herhangi bir otomatik ikame, geri alma/yineleme işlemini "atlamaz" veya kırmaz.
4. Yerel ayar ve aygıt. Klavyeler, bölücüler, takvim ve para birimleri - bölgeye ve platforma göre.
5. Erişilebilirlik ve gizlilik. Metin + simge/renk; Hassas alanları maskeliyoruz, ancak parola yöneticilerine/otomatik tamamlamaya müdahale etmiyoruz.

2) Maske uygun olduğunda (ve olmadığında)

• Kararlı bir yapıya sahip formatlar: telefon, IBAN, PAN (kartlar), CVC, tarih, saat, dizin, OTP.
• Ayırıcılı parasal miktarlar (yazdırırken - "temiz" girdi, bulanıklaştırırken - format).
• Kodlar (ref. kodlar, promosyon), sabit uzunluklar.

• Adlar/adresler/E-posta (maske geçerli karakterleri/dilleri sınırlar).
• Karmaşık serbest alanlar (yorumlar, şirket adları).
• Potansiyel olarak bilinmeyen biçime sahip girdi (ülkesiz uluslararası sayılar).

3) Maske vs otomatik format vs doğrulama

Maske - on-the-fly yapı ipucu (parantez, tire); Giriş/ekleme işlemi kesilmemelidir.
Otomatik format - bulanıklık/odak kaybı (binlerce, IBAN alanları) için kullanın.
Doğrulama - doğruluk mantığı (uzunluk, sağlama toplamı), 'bulanıklaştırma' veya 'gönderme' sonrası hataları gösterir.

Kural: maske doğrulamanın yerini almaz ve otomatik biçim girilen maskenin anlamını değiştirmemelidir.

4) HTML klavyeleri ve nitelikleri

5) Taşıma, kopyala yapıştır ve normalleştirme

Dikkat kesmeyin: karakterleri (boşluk/parantez) otomatik takarken imleç konumunu ayarlayın.
Yapıştır: eklerken, boşlukları/tireleri temizleyin - doğrulayın - formatlama ile görüntüleyin.
Normalleştirme: kesme, karakterlerin "eğrilerinin" değiştirilmesi ("O" - "0" olamaz!), IBAN için büyük harf çevirisi, birleşik depolama tarihi biçimi (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) Sayılar, para birimleri ve lokaller

Giriş "yazdırıldığı gibi" (tolerans ',' veya '. Ayırıcı olarak), küçük birimlerde depolama (kopekler/sent).
Bulanıklaştırma/gönderimden sonra yerel (binlerce kişilik) haritalama; Odakta, düzenleme kolaylığı için "ham" değeri gösterin.
Para birimini açıkça belirtin ve doğruluğu düzeltin (örneğin, 2 karakter).

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) Tarih ve saatler

Yerel toplayıcılar platformlarda rahatsız edici/farklıysa - 'DD maskesi olan bir metin kutusu kullanın. MM. YYYY ', ama ISO' YYY-MM-DD 'tutun.
Tarih gerçeklik kontrolü (29. 02, aralıklar), saat dilimleri - sunucuda.
"Bugün", "Şimdi", "Temizle" düğmelerini ekleyin.

8) Telefonlar ve ülkeler

İki alan: seçilen ülke için ülke (+ kodu) ve numara veya akıllı maske.
Tam '+ CC...' eklerken, ülkeyi otomatik tamamlayın.
Mağaza E.164 ('+ CCXXXXXXXXX'), boşluklarla yerel olarak göster.

9) Ödeme detayları: PAN/IBAN/CVC/EXP

PAN: 4-4-4-4/4 gruplandırma; değerde - sadece sayılar; Luhn-check; PAN ile günlükler/analizler yok.
CVC:' password' tarzı (gizli), 'autocomplete =" cc-csc"', taslaklara kaydetmeyin.
EXP: 'MM/YY', 2 rakamdan sonra otomatik olarak'/' ekleyin, 01-12 aralığını ve makul yılı kontrol edin.
IBAN: Büyük harf, yalnızca UI'de boşluklar; Ülkeye ve sağlama toplamına göre uzunluğu kontrol edin.

10) OTP/onay kodu

Otomatik netleme ve otomatik geçişli 6 (veya N) hücre, arabellekten yapıştırma tüm kodu tanır.
'autocomplete ='tek seferlik kod "', cep telefonlarında - SMS'ten otomatik çıkarma.
Bölünmüş alanlar (bir alan) olmadan yedekleme girişi - ekran okuyucular için.

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

11) Maskeler ve a11y

Etiket gereklidir ('<label for>'), yer tutucu bir örnektir, değiştirme değildir.
Kuralı yan yana açıklayın: örnek ile yardımcı metin ("Biçim: + CC ХХХ ХХХ - ХХ - ХХ").
Hataları 'aria-description by', critical - 'role =' alert '' aracılığıyla ilişkilendirin.
Metin ve konturların kontrastı ≥ AA, ': focus-visible' gizlenemez.

12) Gizlilik ve güvenlik

Hassas alanlar: oturum açmayın, RUM'a yazmayın, taslaklara kaydetmeyin (PAN, CVC, pasaport).
Maskeler ve biçimlendirme, hesabın geçerliliğini göstermemelidir ("E-posta kayıtlı ise"... - tarafsız ifadeler).
Kritik gönderiler için idempotency ve yeniden deneme (ödeme/oran).

13) Form davranışı ve performansı

Asenkron kontrollerin debisi (250-400 ms), görünür gösterge "Check"....
Bir alan uğruna tüm ekranı kilitlemeyin; Yerel spinner/iskelet.
Toplu DOM değişiklikleri; Sadece 'transform/opacity' animate.
Mobilde - klavye göründüğünde "zıplamalardan" kaçının (güvenli alan, viewport meta).

14) Kod parçacıkları

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) Tasarım sistemi belirteçleri (örnek)

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'in özellikleri

Ödemeler/para çekme: Yumuşak maskelerle PAN/IBAN/tutar; Sıkı idotans ve hassas alan günlükleri eksikliği; Komisyonlar ve son tarihler hakkında ipuçları.
KYC: tarihler için maskeler, pasaport numaraları ("zor" filtreleme olmadan - farklı formatları dikkate alarak), dosya boyutu/türü, önizleme.
Sınırlar ve sorumlu oyun: anlaşılabilir miktarlar/dönemler (günler/haftalar/aylar), yakındaki yardımcılar, AAA kontrastı.
Bahisler: Yerel ayarlara göre formatı bulanıklaştırırken, "ham" sayı odağında, miktarın hızlı girişi (hazır ayarlar + alan); Kabul edilmeyen, "..... "/çift ayırıcının.

17) Anti-desenler

Geçerli karakterleri/eklemeyi reddeden sert maskeler.
Otomatik format ile atlama caret; Çıkarma/geri alma kaybı.
Etiket yerine yer tutucu.
Değerin içine para birimini otomatik olarak ekleyin (kopyalama yapıştırmasını keser).
Hata ayıklama olmadan "karakter başına" hatalar.
Depolamada yerel bağımsız biçimler (ISO/numaraları depolayın).
PAN/pasaport numaralarını kaydetme ve reddedilme için'çok dürüst "nedenler gösterme.

18) Metrikler ve deneyler

Alanlara göre hata oranı (maskeden önce/sonra).
Tamamlama Süresi formları ve yeniden gönderimler.
Başarısız eklerin (kopyala yapıştır) ve geri dönüşlerin (geri alma) oranı.
İpuçlarının/örneklerin TO'su, otomatik tamamlamaların oranı.
Ödeme adımında/ACC'de terk oranı.

19) KG kontrol listesi

Giriş ve bakım

• Tampondan yapıştırma bozulmaz, boşluklar/tireler doğru şekilde temizlenir.
• Caret otomatik formattan sonra öngörülebilir kalır.

Yerel ve biçim

• Miktarlar izin verir ','/'.'; Küçük ünitelerde depolama.
• Tarihler ayrıştırılır ve doğrulanır; ISO'da depolama.

A11y

• Etiketler ve 'aria-describby' bağlantılıdır; 'role =' alert '' kritik için.
• Kontrast ve odak halkaları AA'ya karşılık gelir.

Güvenlik

• Hassas alanlar günlüğe kaydedilmez/önbelleğe alınmaz.
• Idempotency ve kritik adımlarda yeniden deneyin.

UX

• Yer tutucu - örnek, etiket değil; yakındaki yardımcı.
• Maskeler cep telefonlarında yazdırmayı engellemez; doğru klavyeler ('inputmode').

20) Tasarım sistemindeki belgeler

Компоненты: 'MaskedInput', 'MoneyInput', 'PhoneInput', 'OtpInput', 'IbanInput'.
Maske belirteçleri (uzunluklar/desenler), dikkat/ekleme kuralları, sayı/tarih yerelleştirme.
Gizlilik (günlüğe kaydedilmemesi gerekenler), kullanılabilirlik ve otomatik biçimlendirme vs bulanıklaştırma kılavuzları.
Gerçek örneklerle ve metriklerden önce/sonra "Yap/Yapma".

Kısa Özet

Maskeler ve şekiller, girişi hızlandırdıklarında, verileri temiz tuttuklarında ve müdahale etmediklerinde iyidir. Dikkatlice biçimlendirin, girişte normalleştirin, sabit formlarda saklayın, yerel ayarları ve kullanılabilirliği dikkate alın. Formlar daha sonra hızlı ve anlaşılır hale gelir - özellikle hassas ödeme, KYC ve bahis senaryolarında.