შეყვანის ნიღბები და UX ფორმები

1) პრინციპები

1. დახმარება, არ დაისაჯოთ. ნიღაბი უგზავნის შეყვანას და ამცირებს შეცდომებს, მაგრამ არ ბლოკავს ბეჭდვას და ჩანართს.
2. რუქის მონაცემები. ჩვენ შევინახავთ „ნედლეულ“ ნორმალიზებულ მნიშვნელობებს, ჩვენ მხოლოდ UI- ში ვქმნით ფორმატს.
3. პროგნოზირებადი კურსორი. ნებისმიერი ავტო ჩანაცვლება არ „ხტომა“ კარეტს და არ არღვევს undo/redo.
4. ლოკალი და მოწყობილობა. კლავიატურა, გამყოფი, კალენდარი და ვალუტა - რეგიონის და პლატფორმის მიხედვით.
5. წვდომა და კონფიდენციალურობა. ტექსტი + ხატი/ფერი; ჩვენ ნიღბავს მგრძნობიარე სფეროებს, მაგრამ არ ერევა პაროლების/ბენზინგასამართი სადგურების მენეჯერებს.

2) როდესაც ნიღაბი მიზანშეწონილია (და როდის არა)

• სტაბილური სტრუქტურის ფორმატები: ტელეფონი, IBAN, PAN (ბარათები), CVC, თარიღი, დრო, ინდექსი, OTP.
• გამყოფებთან ფულადი თანხები (დაბეჭდვისას - „სუფთა“ შეყვანა, ბლუზით - ფორმატი).
• კოდები (რეპი. კოდები, პრომო), ფიქსირებული სიგრძე.

• სახელები/მისამართები/Email (ნიღაბი ზღუდავს დასაშვებ სიმბოლოებს/ენებს).
• რთული თავისუფალი ველები (კომენტარები, კომპანიების სახელები).
• შემოღება პოტენციურად უცნობი ფორმატით (საერთაშორისო ნომრები ქვეყნის გარეშე).

3) vs მანქანის ფორმატის ნიღაბი

ნიღაბი - სტრუქტურის მინიშნება „ფრენაზე“ (ფრჩხილები, დეფისები); არ უნდა დაარღვიოს შეყვანა/ჩანართი.
ავტო ფორმატი - ჩვენ ვიყენებთ ფოკუსის ბლერს/დაკარგვისთვის (ათასი, IBAN ხარვეზები).
შესაბამისობა - სისწორის ლოგიკა (სიგრძე, მაკონტროლებელი თანხები), შეცდომების ჩვენება „blur“ ან „წყალქვეშა“ შემდეგ.

წესი: ნიღაბი არ ცვლის ვალიდაციას, ხოლო მანქანის ფორმატმა არ უნდა შეცვალოს დანერგვის მნიშვნელობა.

4) HTML კლავიატურა და ატრიბუტები

5) კარეტი, კოპიპასტი და ნორმალიზაცია

არ დაარღვიოთ caret: მანქანის ჩანართით სიმბოლოები (ხარვეზები/ფრჩხილები) შეცვალეთ კურსორის პოზიცია.
კოპიპასტა: როდესაც ჩასმა ხდება, გაასუფთავეთ ხარვეზები/დეფიზიტები, გაუფერულდით და აჩვენეთ ფორმატით.
ნორმალიზაცია: ტრიმინგი, სიმბოლოების „მრუდი“ ჩანაცვლება ('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) რიცხვები, ვალუტები და იდაყვები

შეყვანა "როგორ იბეჭდება" (დაშვება ',' ან '. "გამყოფად), მინორის ერთეულებში შენახვა (პენი/ცენტები).
იდაყვის რუქა (ათასი ჯგუფი) ბლურზე/საბმიტის შემდეგ; ყურადღებით აჩვენეთ „ნედლეული“ მნიშვნელობა რედაქტირების მოხერხებულობისთვის.
აშკარად მიუთითეთ ვალუტა და დააფიქსირეთ სიზუსტე (მაგალითად, 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 ('+ CCXXXXXXXX'), აჩვენეთ ადგილობრივად ხარვეზებით.

9) გადახდის დეტალები: PAN/IBAN/CVC/EXP

PAN: ჯგუფი 4-4-4-4/4; მნიშვნელობით - მხოლოდ რიცხვები; Luhn-check; არ არსებობს ლოგოები/ანალიტიკოსები PAN- ით.
CVC:' password' -stil (იმალება), 'autocomplete =“ cc-csc“', არ შეინახოთ მონახაზები.
EXP: 'MM/YY', მანქანის ჩანართი '/' 2 ციფრის შემდეგ, 01-12 და გონივრული წლის დიაპაზონის შემოწმება.
IBAN: upper-case, ხარვეზები მხოლოდ UI- ში; ქვეყნის მასშტაბით სიგრძის შემოწმება და კონტროლი.

10) OTR/დადასტურების კოდი

6 (ან N) უჯრედი ავტოფოკუსით და ავტომატური გადასასვლელით, ბუფერული ჩანართი ცნობს მთელ კოდს.
'autocomplete = "ons-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

ეტიკეტი სავალდებულოა ('<label for>'), placeholder არის მაგალითი და არა ჩანაცვლება.
განმარტეთ წესი ახლომდებარე: helper text მაგალითით („ფორმატი: + CC XXX-XX-XX“).
შეცდომები დააკავშირეთ 'aria-describedby' საშუალებით, კრიტიკულად - 'role = „alert“.
ტექსტისა და კონტურების კონტრასტი AA, ': focus-visible' არ იმალება.

12) კონფიდენციალურობა და უსაფრთხოება

მგრძნობიარე ველები: არ მოაწყოთ, არ დაწეროთ RUM- ში, არ შეინახოთ მონახაზები (PAN, CVC, პასპორტი).
ნიღბები და ფორმატირება არ უნდა გაამჟღავნოს ანგარიშის მთლიანობა („თუ email რეგისტრირებულია...“ - ნეიტრალური ფორმულირება).
Idempotence და retry კრიტიკული საბმებისთვის (გადახდა/განაკვეთი).

13) ფორმებისა და პროდუქტიულობის ქცევა

ასინქრონული შემოწმებების დებატები (250-400 ms), აშკარა მითითება „შემოწმება“....
არ დაბლოკოთ მთელი ეკრანი ერთი ველის გულისთვის; ადგილობრივი სპინერი/ჩონჩხი.
Batch DOM ცვლილებები; ანიმაცია მხოლოდ 'ტრანსფორმაცია/opacity'.
მობილურ რეჟიმში - თავიდან აიცილეთ „ნახტომი“, როდესაც კლავიატურა ჩნდება (safe-area, viewport meta).

14) snippets კოდი

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/amount რბილი ნიღბებით; მკაცრი იდემპოტენტურობა და მგრძნობიარე ველების ლოგოების არარსებობა; მინიშნებები კომისიისა და ვადების შესახებ.
KYC: ნიღბები თარიღებისთვის, პასპორტის ნომრები („მკაცრი“ ფილტრაციის გარეშე - სხვადასხვა ფორმატის აღრიცხვა), ფაილის ზომა/ტიპი, წინასწარი შემოწმება.
ლიმიტები და საპასუხისმგებლო თამაში: გასაგები თანხები/პერიოდები (დღეები/კვირა/თვეები), ახლომდებარე ჰელპერები, AAA- ს კონტრასტი.
განაკვეთები: სწრაფი შეყვანა თანხა (ღილაკები-პრესეტები + ველი), „ნედლეული“ ნომრის ფოკუსში, ბლუზით, იდაყვის ფორმატი; დაუშვებელია „„,... .../ორმაგი გამყოფი.

17) ანტი შაბლონები

მკაცრი ნიღბები, რომლებიც კრძალავს დასაშვებ სიმბოლოებს/ჩანართს.
jumping caret მანქანის ფორმატით; გამონადენის დაკარგვა/undo.
Placeholder ეტიკეტის ნაცვლად.
ვალუტის დამატება მნიშვნელობით (არღვევს კოპიპასტს).
შეცდომები „თითოეული სიმბოლოსთვის“ დებატების გარეშე.
საცავში ლოკალეზიური ფორმატები (შეინახეთ ISO/ნომერი).
PAN/პასპორტის ნომრების ლოჯისტიკა და გადახრის „ძალიან გულწრფელი“ მიზეზების ჩვენება.

18) მეტრიკა და ექსპერიმენტები

Error rate მინდვრებში (ნიღბის დაწყებამდე).
Time-to-Complete ფორმები და ხელახალი გაგზავნა.
წარუმატებელი ჩანართების (კოპიპასტის) და „გამოტოვების“ (undo) წილი.
CTR რჩევები/მაგალითები, ბენზინგასამართი სადგურების წილი.
Abandon rate გადახდის ეტაპზე/CCC.

19) QA ჩეკის სია

შეყვანა და caret

• ბუფერული ჩანართი არ იშლება, ხარვეზები/დეფიზები სწორად იწმინდება.
• Caret რჩება პროგნოზირებადი მანქანის ფორმატის შემდეგ.

ლოკალი და ფორმატი

• თანხები ნებადართულია ', '/'.'; შენახვა minor units.
• თარიღები ციმციმდება და ვალდება; შენახვა ISO- ში.

A11y

• ეტიკეტები და 'aria-describedby' დაკავშირებულია; 'role = „alert“ კრიტიკულისთვის.
• კონტრასტი და ფოკუს რგოლები შეესაბამება AA- ს.

უსაფრთხოება

• მგრძნობიარე ველები არ არის დაფიქსირებული/არ არის გადახურული.
• Idempotenty და retry კრიტიკულ ნაბიჯებზე.

UX

• Placeholder - მაგალითი, არა ეტიკეტი; helper იქვე.
• ნიღბები არ ერევა ბეჭდვას მობილური; სწორი კლავიატურა ('inputmode').

20) დოკუმენტაცია დიზაინის სისტემაში

Компоненты: `MaskedInput`, `MoneyInput`, `PhoneInput`, `OtpInput`, `IbanInput`.
ნიღბების ნიშნები (სიგრძე/შაბლონები), კარეტის/ჩანართების წესები, რიცხვების/თარიღების ლოკალიზაცია.
ჰეიდები კონფიდენციალურობაზე (რაც არ უნდა გაკეთდეს), ხელმისაწვდომობის თვალსაზრისით და მანქანის ფორმატის მიხედვით.
„Do/Don 't“ რეალური მაგალითებითა და მეტრიკებით/შემდეგ.

მოკლე რეზიუმე

ნიღბები და ფორმები კარგია, როდესაც ისინი აჩქარებენ შეყვანას, ინარჩუნებენ მონაცემებს სუფთა და არ ერევა. ფორმატირება ფრთხილად, ნორმალიზდება შესასვლელში, შეინახეთ სტაბილური ფორმები, გაითვალისწინეთ იდაყვის და ხელმისაწვდომობის შესახებ. შემდეგ ფორმები სწრაფი და გასაგები ხდება - განსაკუთრებით მგრძნობიარე გადახდის სცენარებში, KYC და განაკვეთები.