أقنعة الإدخال ونماذج UX

1) المبادئ

1. النجدة، وليس العقاب. يرشد القناع المدخلات ويقلل من الأخطاء، لكنه لا يحظر الطباعة والإدخال.
2. ≠ عرض البيانات نقوم بتخزين القيم الطبيعية «الخام»، التنسيق فقط في واجهة المستخدم.
3. مؤشر يمكن التنبؤ به. أي استبدال تلقائي لا «يقفز» أو يكسر التراجع/إعادة.
4. الموقع والجهاز. لوحات المفاتيح والفواصل والتقويم والعملات - حسب المنطقة والمنصة.
5. إمكانية الوصول والخصوصية. النص + أيقونة/لون ؛ نخفي الحقول الحساسة، لكننا لا نتدخل في مديري كلمات المرور/المكتمل تلقائيًا.

2) عندما يكون القناع مناسبًا (وعندما لا يكون كذلك)

• تنسيقات ذات هيكل مستقر: الهاتف، IBAN، PAN (بطاقات)، CVC، التاريخ، الوقت، الفهرس، OTP.
• المبالغ النقدية مع الفاصلات (عند الطباعة - مدخلات «نظيفة»، عندما تكون ضبابية - تنسيق).
• الرموز (الرموز، الترويج)، الأطوال الثابتة.

• الأسماء/العناوين/البريد الإلكتروني (حدود الأقنعة للحروف/اللغات الصالحة).
• حقول مجانية معقدة (تعليقات، أسماء شركات).
• مدخلات ذات شكل غير معروف (أرقام دولية بدون بلد).

3) قناع مقابل تنسيق تلقائي مقابل التحقق من صحة

قناع - تلميح هيكل أثناء الطيران (أقواس، واصلات) ؛ يجب ألا يكسر المدخلات/الإدراج.
التنسيق التلقائي - الاستخدام للضبابية/فقدان التركيز (الآلاف، مساحات IBAN).
التحقق - منطق الصواب (الطول، الشيكات)، إظهار الأخطاء بعد «الضبابية» أو «الإرسال».

القاعدة: لا يحل القناع محل التحقق، ولا ينبغي أن يغير التنسيق التلقائي معنى المدخل.

4) لوحات مفاتيح وسمات HTML

5) النقل ومعجون النسخ والتطبيع

لا تكسر الحذر: عند الإدخال التلقائي للحروف (المساحات/الأقواس)، اضبط موضع المؤشر.
عجينة النسخ: عند الإدخال، → التحقق من صحة المساحات/الواصلات → العرض بالتنسيق.
التطبيع: التشذيب، استبدال «منحنيات» الأحرف («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. م.
تاريخ التحقق من الواقع (29. 02، النطاقات)، المناطق الزمنية - على الخادم.
أضف أزرار «اليوم»، «الآن»، «واضح».

8) الهواتف والبلدان

مجالان: البلد (+ الرمز) والرقم أو القناع الذكي للبلد المختار.
عند إدخال «+ CC» الكامل...، اكمل البلاد تلقائيًا.
E.164 المتجر (+ CCXXXXXXXXX)، تظهر محليًا مع مساحات.

9) تفاصيل الدفع: PAN/IBAN/CVC/EXP

PAN: مجموعة 4-4-4-4/4 ؛ في القيمة - الأرقام فقط ؛ Luhn-check; لا سجلات/تحليلات مع PAN.
CVC: "كلمة المرور" -style (مخفي)، "autoclomplete =" cc-csc "، لا تحفظ للمسودات.
EXP: 'MM/YY'، الإدخال التلقائي '/' بعد 2 أرقام، والتحقق من نطاق 01-12 والسنة المعقولة.
IBAN: في الحالة العليا، المساحات في واجهة المستخدم فقط ؛ تحقق من الطول حسب البلد والفحص.

10) OTP/رمز التأكيد

6 (أو N) الخلايا ذات التركيز التلقائي والانتقال التلقائي، اللصق من المخزن المؤقت يعترف بجميع الرموز.
"autocomplete =" رمز لمرة واحدة "، على الهواتف المحمولة - استخراج تلقائي من الرسائل القصيرة.
مدخلات احتياطية بدون حقول مقسمة (حقل واحد) - لقراء الشاشة.

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

11) أقنعة و a11y

التسمية مطلوبة (<label for> ')، العنصر المساعد مثال وليس بديلاً.
شرح القاعدة جنبًا إلى جنب: نص مساعد مع مثال («الشكل: + CC ХХХ ХХХ - ХХ - ХХ»).
أخطاء الزملاء عبر 'aria-descripdy'، حرج - 'role =' alert'.
لا يمكن إخفاء التباين بين النص والخطوط ≥ AA، ': التركيز المرئي'.

12) الخصوصية والأمن

الحقول الحساسة: لا تسجل، لا تكتب إلى RUM، لا تدخر في المسودات (PAN، CVC، جواز السفر).
يجب ألا تكشف الأقنعة والتنسيق عن صحة الحساب («إذا تم تسجيل البريد الإلكتروني»... - صياغة محايدة).
الخصوصية وإعادة النظر في العروض الحرجة (الدفع/السعر).

13) شكل السلوك والأداء

خصم من الفحوصات غير المتزامنة (250-400 مللي ثانية)، مؤشر مرئي «تحقق».
لا تقفل الشاشة بأكملها من أجل حقل واحد ؛ الدوار المحلي/الهيكل العظمي.
دفعة تغييرات DOM ؛ تحريك فقط «التحويل/التعتيم».
على الهاتف المحمول - تجنب «القفزات» عند ظهور لوحة المفاتيح (منطقة آمنة، ميتا فيوبورت).

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.
الرهانات: إدخال سريع للمبلغ (تجهيزات مسبقة + حقل)، في رقم التركيز «الخام»، عند عدم وضوح التنسيق حسب الموقع ؛ ) ب (عدم القبول، "........................................................................................................................................................................................................................................................

17) الأنماط المضادة

أقنعة صلبة تنكر الأحرف/الإدخال الصحيح.
قفز الحذر مع تنسيق تلقائي ؛ فقدان الاستخراج/التراجع.
العنصر المساعد بدلاً من التسمية.
العملة المضافة تلقائيًا داخل القيمة (تكسر معجون النسخ).
أخطاء «لكل شخصية» دون فضح.
تنسيقات الاعتماد المحلي في التخزين (تخزين ISO/الأرقام).
تسجيل أرقام PAN/جوازات السفر وإظهار أسباب «صادقة للغاية» للرفض.

18) المقاييس والتجارب

معدل الخطأ حسب الحقول (قبل/بعد القناع).
النماذج وإعادة التقديم من وقت إلى آخر.
نسبة الإدخالات الفاشلة (معجون النسخ) والتراجع (التراجع).
CTR للتلميحات/الأمثلة، نسبة المكملات الذاتية.
التخلي عن المعدل في درجة الدفع/لجنة التنسيق الإدارية.

19) قائمة QA المرجعية

المدخلات والحرص

• لا ينكسر اللصق من الحاجز، ويتم مسح المساحات/الواصلات بشكل صحيح.
• يظل Caret متوقعًا بعد التنسيق التلقائي.

الموقع والشكل

• المبالغ المسموح بها '، '/'. في وحدات ثانوية.
• يتم تحليل التواريخ والتصديق عليها ؛ في المنظمة الدولية للتوحيد القياسي.

A11y

• البطاقات التعريفية و 'الأريا-وصفية' متصلتان ؛ "role =" تنبيه "للحرج.
• حلقات التباين والتركيز تتوافق مع AA.

الأمن

• الحقول الحساسة غير مسجلة/مخبأة.
• الفراغ وإعادة المحاولة في خطوات حاسمة.

UX

• العنصر المساعد - مثال، وليس الوسم ؛ مساعد في مكان قريب.
• الأقنعة لا تمنع الطباعة على الهواتف النقالة ؛ لوحات المفاتيح الصحيحة («inputmode»).

20) التوثيق في نظام التصميم

Компоненты: "MaskedInput' و" MoneyInput' و "PhoneInput' و" OtpInput' و "IbanInput'.
رموز الأقنعة (أطوال/أنماط)، caret/intre rules، number/tate location.
أدلة الخصوصية (ما لا يجب تسجيله) والتوافر والتنسيق التلقائي مقابل الضبابية.
«افعل/لا تفعل» مع أمثلة حقيقية ومقاييس قبل/بعد.

موجز موجز

تكون الأقنعة والأشكال جيدة عندما تسرع الإدخال وتحافظ على نظافة البيانات ولا تتداخل. التنسيق بعناية، والتطبيع عند المدخل، والتخزين في أشكال ثابتة، مع مراعاة المواقع والتوافر. ثم تصبح النماذج سريعة ومباشرة - خاصة في المدفوعات الحساسة وسيناريوهات KYC والمراهنة.