ماسک های ورودی و فرم های UX

1) اصول

1. کمک کنید نه مجازات ماسک ورودی را هدایت می کند و خطاها را کاهش می دهد، اما چاپ و درج را مسدود نمی کند.
2. نمایش ≠ داده ها ما مقادیر نرمال «خام» را ذخیره می کنیم، فرمت فقط در UI.
3. مکاننمای قابل پیشبینی هر گونه تعویض خودکار «پرش» مراقبت نمی کند و یا شکستن خنثی/redo.
4. محل و دستگاه صفحه کلید، تقسیم، تقویم و ارز - بر اساس منطقه و پلت فرم.
5. دسترسی و حریم خصوصی متن + آیکون/رنگ ؛ ما ماسک زمینه های حساس، اما با مدیران رمز عبور/autocomplete دخالت نمی کند.

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) اعداد، ارزها و مناطق

ورودی "به عنوان چاپ" (تحمل "،" یا "به عنوان جدا کننده)، ذخیره سازی در واحد های جزئی (kopecks/سنت).
نقشه برداری محلی (گروه بندی هزاران) در تاری/پس از تسلیم ؛ در تمرکز، ارزش «خام» را برای سهولت ویرایش نشان می دهد.
به صراحت ارز را مشخص کنید و دقت را ثابت کنید (به عنوان مثال، 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 ('+ CCXXXXXXXXXX')، نشان می دهد به صورت محلی با فضاهای.

9) جزئیات پرداخت: PAN/IBAN/CVC/EXP

PAN: 4-4-4-4/4 گروه بندی ؛ در ارزش - فقط اعداد ؛ بررسی لون ؛ بدون گزارش/تجزیه و تحلیل با PAN.
CVC: 'password' -style (hidden), 'autocomplete =' cc-csc '', در پیشنویسها ذخیره نکنید.
EXP: 'MM/YY'، خودکار درج '/' پس از 2 رقم، محدوده را بررسی کنید 01-12 و سال معقول.
IBAN: بالا مورد، فضاهای تنها در UI ؛ بررسی طول کشور و چک سام.

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-descedby»، بحرانی - «role =» alert «».
کنتراست متن و خطوط ≥ AA، «: تمرکز قابل مشاهده» را نمی توان پنهان کرد.

12) حریم خصوصی و امنیت

زمینه های حساس: وارد نشوید، در RUM ننویسید، در پیش نویس ها ذخیره نکنید (PAN، CVC، گذرنامه).
ماسک ها و قالب بندی ها نباید اعتبار حساب را نشان دهند («اگر ایمیل ثبت شده است»... - جمله بندی خنثی).
Idempotency و سعی کنید برای submitts بحرانی (پرداخت/نرخ).

13) رفتار و عملکرد فرم

بدهی چک ناهمزمان (250-400 میلی ثانیه), نشانه قابل مشاهده «بررسی»....
تمام صفحه را به خاطر یک فیلد قفل نکنید. اسپینر/اسکلت محلی.
تغییرات DOM دسته ای ؛ فقط «transform/opacity» را تحریک کنید.
در تلفن همراه - اجتناب از «جهش» زمانی که صفحه کلید به نظر می رسد (امن منطقه، متا نمایش).

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/مقدار با ماسک نرم ؛ idemotence سخت و عدم سیاهههای مربوط به زمینه حساس ؛ راهنمایی در مورد کمیسیون ها و مهلت.
KYC: ماسک برای تاریخ، شماره گذرنامه (بدون فیلتر «سخت» - با در نظر گرفتن فرمت های مختلف)، اندازه فایل/نوع، پیش نمایش.
محدودیت ها و بازی مسئولانه: مقادیر/دوره های قابل فهم (روزها/هفته ها/ماه ها)، یاران در نزدیکی، کنتراست AAA.
شرط: ورود سریع از مقدار (ایستگاه از پیش تنظیم + درست), در تمرکز «خام» تعداد, زمانی که تار فرمت های محلی; عدم پذیرش، «..... «/جداکننده دوگانه.

17) ضد الگوهای

ماسک های سخت که شخصیت های معتبر/درج را رد می کنند.
پریدن با فرمت خودکار ؛ از دست دادن استخراج/خنثی کردن.

نگه دارنده به جای برچسب

خودکار اضافه کردن ارز در داخل ارزش (می شکند کپی چسباندن).
اشتباهات «در هر شخصیت» بدون debunking.
فرمت های مستقل محلی در ذخیره سازی (ذخیره ISO/اعداد).
ثبت شماره PAN/گذرنامه و نشان دادن دلایل «بیش از حد صادقانه» برای رد.

18) معیارها و آزمایشات

میزان خطا بر اساس فیلدها) قبل/بعد از ماسک (.
زمان برای تکمیل فرم ها و ارسال مجدد.
نسبت درج های ناموفق (کپی پیست) و برگشت (خنثی کردن).
CTR از نکات/نمونه ها، نسبت تکمیل خودکار.
رها کردن نرخ در مرحله پرداخت/ACC.

19) چک لیست QA

ورودی و مراقبت

• چسباندن از بافر شکسته نمی شود، فضاها/خطوط به درستی پاک می شوند.
• Caret پس از فرمت خودکار قابل پیش بینی است.

محل و فرمت

• مقادیر اجازه می دهد '، '/' ؛ ذخیره سازی در واحدهای کوچک
• تاریخها تجزیه و تأیید میشوند ؛ ذخیره سازی در ISO

A11y

• برچسب ها و 'aria-describby' متصل هستند ؛ 'role = «هشدار» برای بحرانی.
• حلقه های کنتراست و تمرکز مربوط به AA است.

امنیت

• فیلدهای حساس ذخیره/ذخیره نمی شوند.
• ناتوانی و تلاش مجدد در مراحل بحرانی.

تجربه کاربری

• Placeholder - به عنوان مثال، نه برچسب ؛ کمک در نزدیکی
• ماسک ها از چاپ بر روی تلفن های همراه جلوگیری نمی کنند ؛ صفحه کلید صحیح ('inputmode').

20) مستندات در سیستم طراحی

Компоненты: 'MaskedInput', 'MoneyInput', 'PhoneInput', 'OtpInput', 'IbanInput'.
نشانه ماسک (طول/الگوهای), caret/درج قوانین, شماره/تاریخ محلی سازی.
راهنمایی برای حفظ حریم خصوصی (چه چیزی نباید وارد شود)، در دسترس بودن و فرمت خودکار در مقابل تاری.
«انجام/انجام» با نمونه های واقعی و قبل/بعد از معیارهای.

خلاصه ای کوتاه

ماسک ها و شکل ها هنگام سرعت بخشیدن به ورودی خوب هستند، داده ها را تمیز نگه می دارند و دخالت نمی کنند. با دقت فرمت کنید، در ورودی عادی سازی کنید، در فرم های پایدار ذخیره کنید، مکان ها و در دسترس بودن را در نظر بگیرید. سپس فرم ها سریع و ساده می شوند - به خصوص در پرداخت های حساس، KYC و سناریوهای شرط بندی.