מסכות קלט וצורות UX

1) עקרונות

1. לעזור, לא להעניש. המסכה מדריכה קלט ומקטינה טעויות, אך אינה חוסמת הדפסה והכנסה.
2. נתונים לתצוגה. אנחנו מאחסנים ערכים ”גולמיים” מנורמלים, פורמט רק ב UI.
3. סמן צפוי. כל החלפה אוטומטית לא ”לקפוץ” cart' או לשבור לבטל/redo.
4. מקום ומכשיר. מקלדות, מחלקים, לוח שנה ומטבעות - על ידי אזור ופלטפורמה.
5. נגישות ופרטיות. טקסט + סמל/צבע; אנחנו מסווים שדות רגישים, אבל לא מתערבים במנהלי סיסמאות/השלמה אוטומטית.

2) כאשר המסכה מתאימה (וכאשר לא)

• פורמטים בעלי מבנה יציב: טלפון, IBAN, PAN (כרטיסים), CVC, תאריך, זמן, אינדקס, OTP.
• סכומי כסף עם מפרידים (בעת הדפסה - קלט ”נקי”, בעת טשטוש - פורמט).
• קודים (recodes, promo), אורכים קבועים.

הימנע: ‏

שמות/כתובות/דוא "ל (מסכה מגבילה תווים/שפות תקפים).
שדות חופשיים מורכבים (הערות, שמות חברה).
קלט בפורמט פוטנציאלי לא ידוע (מספרים בינלאומיים ללא מדינה).

3) מסכה נגד פורמט אוטומטי נגד אימות

מסכה - על-זבוב רמז מבנה (סוגריים, מקפים); אסור לשבור את הקלט/הכנסת.
פורמט אוטומטי - שימוש לטשטוש/אובדן מיקוד (אלפים, מרחבי IBAN).
אימות - לוגיקת תקינות (אורך, צ 'קסומים), הצגת שגיאות לאחר ”טשטוש” או ”כניעה”.

כלל: המסכה אינה מחליפה אימות, והפורמט האוטומטי אינו אמור לשנות את משמעות המסכה שנכנסה.

4) מקלדות ותכונות HTML

5) כרכרה, העתק הדבק ונורמליזציה

אל תשבור את הזהירות: כאשר מכניסים תווים אוטומטית (רווחים/סוגריים), התאם את מיקום הסמן.
העתק הדבקה: בעת החדרת, רווחים ברורים/מקפים = לאמת את התצוגה עם תבנית.
נורמליזציה: קיזוז, החלפה של ”עקומות” של תווים ('O' u.cous '00&pos; לא יכול להיות!), תרגום למקרה עליון עבור 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) מספרים, מטבעות ומקומות

קלט "כהדפסה" (סובלנות ", או" ". &pos; כמפריד), אחסון ביחידות קטנות (קופקים/סנט).
מיפוי לוקייל (קיבוצי אלפים) בטשטוש/לאחר כניעה; במוקד, הצג ערך ”גולמי” לקלות עריכה.
ציין במפורש את המטבע ולתקן את הדיוק (לדוגמה, 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. אבל תשאיר את זה אצלי.
תאריך בדיקת מציאות (29. 02, טווחים), אזורי זמן - על השרת.
הוסף כפתורים ”היום”, ”עכשיו”, ”ברור”.

8) טלפונים ומדינות

שני שדות: מדינה (+ קוד) ומספר או מסכה חכמה עבור המדינה הנבחרת.
כאשר מכניסים את '+ CC' המלא..., משלימים אוטומטית את הארץ.
Store E.164 ('+ CCXXXXXXXX'), מראה באופן מקומי עם רווחים.

9) פרטי תשלום: PAN/IBAN/CVC/EXP

4-4-4-4/4 קיבוצים; בערכם - רק מספרים; Luhn-לבדוק; אין יומנים/אנליטיקה עם PAN.
CVC:' סיסמה' - סטייל (מוסתר), 'אוטוקומפלט =” cc-csc”, אל תשמרו לטיוטות.
EXP: 'MM/YYY', אוטומטי-להכניס '/' אחרי 2 ספרות, לבדוק טווח 01-12 ושנה סבירה.
IBAN: במקרה העליון, מרחבים רק UI; בדוק אורך על ידי מדינה ושחמט.

10) קוד OTP/אישור

6 (או N) תאים עם אוטופוקוס ומעבר אוטומטי, הדבקה מהחוצץ מזהה את כל הקוד.
” חד פעמי קוד”, בטלפונים ניידים - חילוץ אוטומטי מ-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>'), שומר מקום הוא דוגמה, לא החלפה.
הסבר את הכלל זה לצד זה: טקסט עזר עם דוגמה (”Format: + CC QureksHupsHupSupsHupsHupsHupsHupsHupsHupsHupsHupsHupsHupsHuding”).
שגיאות קושרות באמצעות 'אריה-תיאורים', תפקיד קריטי = ”התראה”.
לא ניתן להסתיר את הניגוד בין הטקסט לקונטקסט AA.

12) פרטיות וביטחון

שדות רגישים: אל תרשום, אל תכתוב לרום, אל תשמור לטיוטות (PAN, CVC, דרכון).
אין לחשוף את תקפותו של החשבון (”אם רשום דוא” ל... -ניסוח ניטרלי).
Idempotency and retry עבור הגשות קריטיות (תשלום/קצב).

13) צורת התנהגות וביצועים

חיוב של בדיקות אסינכרוני (250-400 ms), אינדיקציה גלויה ”לבדוק”...
אל תנעל את כל המסך למען שדה אחד; ספינר/שלד מקומי.
שינוי DOM Batch; להנפיש רק ”שינוי/אופייה”.
בנייד - הימנע מ ”קפיצות” כאשר המקלדת מופיעה (אזור בטוח, מטה צפייה).

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: מסכות לתאריכים, מספרי דרכון (ללא סינון ”קשה” - לקחת בחשבון פורמטים שונים), גודל קובץ/סוג, תצוגה מקדימה.
מגבלות ומשחק אחראי: כמויות/תקופות מובנות (ימים/שבועות/חודשים), עוזרים בקרבת מקום, ניגוד AAA.
הימורים: כניסה מהירה של הכמות (presents + field), במוקד ”מספר גולמי”, בעת טשטוש הפורמט על ידי locale; ללא כניסה, "..../של מפריד כפול.

17) אנטי דפוסים

מסכות קשות שמכחישות תווים תקפים/החדרה.
קפיצה זהירה עם פורמט אוטומטי; אובדן חילוץ/ביטול.
ממלא מקום במקום תווית.
הוספת מטבע אוטומטית בתוך הערך (שובר הדבקת העתק).
שגיאות ”לכל דמות” בלי להפריך.
פורמטים בעלי תלות מקומית באחסון (store ISO/numbers).
רישום מספרי פאן/דרכון ומראה סיבות ”כנות מדי” לדחייה.

18) מטריצות וניסויים

שיעור שגיאה על ידי שדות (לפני/אחרי המסכה).
זמן להשלמת טפסים ושיבוץ מחדש.
הפרופורציה של הכניסות הכושלות (העתק משחה) וגלגולים (ביטול).
CTR של רמזים/דוגמאות, פרופורציה של אוטוקומפלט.
זניחת שיעור בתשלום שלב/ACC.

19) רשימת QA

קלט ודאגה

[ ] הדבקה מן החוצץ אינה נשברת, רווחים/מקפים מנוקים כראוי.

[ ] קארט נשאר צפוי לאחר פורמט אוטומטי.

Locale ופורמט

[ ] סכומים מאפשרים, '/' &fost; אחסון ביחידות קטנות.

[ תאריכים ] מנותקים ומאומתים; אחסון של ISO.

A11y

[ תוויות ] ו 'אריה-מתאר' מחוברות; רול = ”התראה” עבור קריטי.

[ ] חדות וטבעות מיקוד מתאימות לאלכוהוליסטים אנונימיים.

אבטחה

[ שדות רגישים ] אינם מחוברים/מחוברים.

[ ] אידמפוטנטיות ולנסות מחדש בצעדים קריטיים.

UX

[ ] ממלא מקום - דוגמה, לא תווית; עוזר בקרבת מקום.

[ מסכות ] אינן מונעות הדפסה בטלפונים ניידים; מקלדות נכונות ('inputmode').

20) תיעוד במערכת התכנון

"Masuale Input'," Money Input', "Phone Input'," OtpInput', "Ibaninput'.
אסימונים מסכות (אורכים/תבניות), כללי cart/insert, לוקליזציה מספר/תאריך.
מדריכים לפרטיות (מה לא לרישום), זמינות ופורמט אוטומטי נגד טשטוש.
"Do/Don 'עם דוגמאות אמיתיות ולפני/אחרי מדדים.

תקציר

מסכות וצורות הן טובות כאשר הם מאיצים את הקלט, שומרים על נתונים נקיים ולא מתערבים. פורמט בזהירות, לנרמל בכניסה, לאחסן בצורות יציבות, לקחת בחשבון מקומות וזמינות. הטפסים נעשים מהירים וישירים - בעיקר בתשלום רגיש, בתרחישי הימורים.