Input Mask: چیست، ماسک‌های ورودی و قالب‌بندی

Input Mask چیست؟

Input Mask (ماسک ورودی) مکانیزمی است که الگوی داده‌های ورودی را تعیین می‌کند و به طور خودکار متن را هنگام تایپ قالب‌بندی می‌کند. کاربر فقط کاراکترهای معنی‌دار (اعداد، حروف) را وارد می‌کند و سیستم به طور خودکار جداکننده‌ها را اضافه می‌کند: فاصله‌ها، خط تیره‌ها، پرانتزها، خطوط مورب. این تفاوت اساسی با پس‌پردازش است، جایی که داده‌ها پس از اتمام ورودی قالب‌بندی می‌شوند.

ماسک‌های ورودی سه مشکل تجربه کاربری را حل می‌کنند. اول — بار شناختی: کاربر نیازی به حفظ فرمت داده و قرار دادن دستی جداکننده‌ها ندارد. دوم — سرعت ورودی: درج خودکار جداکننده‌ها و انتقال به گروه بعدی کاراکترها تایپ را سرعت می‌بخشد. سوم — کیفیت داده: ماسک تضمین می‌کند که داده‌ها بدون تغییر در قالبی یکسان جمع‌آوری شوند.

برخلاف فرمت‌دهنده‌های NSFormatter که در سطح نمایش داده‌های از پیش وارد شده کار می‌کنند، Input Mask در سطح ورودی کار می‌کند: هر کاراکتر وارد شده را کنترل می‌کند و تعیین می‌کند که آیا در موقعیت فعلی ماسک مجاز است یا خیر. اگر کاراکتر با ماسک مطابقت نداشته باشد، رد یا نادیده گرفته می‌شود.

طبق تحقیقات UX اپل (2024)، ماسک‌های ورودی برای فیلدهایی که کاربر داده‌ها را با قالبی ناآشنا وارد می‌کند، مؤثرترین هستند. به عنوان مثال، SNILS (000-000-000 00) یا INN (000000000000) — کاربر ممکن است تعداد دقیق ارقام یا محل جداکننده‌ها را نداند و ماسک به صورت بصری قالب صحیح را نشان می‌دهد.

نحو ماسک ورودی

نحو ماسک در کتابخانه InputMask از ترکیبی از کاراکترهای جایگزین و ثابت استفاده می‌کند. جایگزین‌ها نوع کاراکتر مجاز را در هر موقعیت تعیین می‌کنند: 0 یا 9 برای اعداد، A برای حروف، _ برای هر کاراکتری. کاراکترهای ثابت جداکننده‌هایی هستند که به طور خودکار درج می‌شوند: فاصله‌ها، خط تیره‌ها، پرانتزها، نقطه‌ها، خطوط مورب.

بلوک‌های اجباری و اختیاری

براکت‌های مربع [0] یک کاراکتر اجباری را نشان می‌دهند — کاربر باید در این موقعیت یک رقم وارد کند. آکولادها {0} یک کاراکتر اختیاری را نشان می‌دهند — اگر کاربر بلوک را رد کند، ماسک جداکننده‌های مربوطه را درج نمی‌کند. به عنوان مثال، ماسک [00]{.}[00]{.}[0000] برای تاریخ: اگر کاربر ماه را وارد نکند، جداکننده بعد از روز نیز نمایش داده نمی‌شود.

پسوند ماسک

کاراکترهای ثابت خارج از براکت‌های مربع و آکولادها پسوند را تشکیل می‌دهند — آنها همیشه نمایش داده می‌شوند، حتی اگر فیلد خالی باشد. به عنوان مثال، در ماسک +7 ([000]) [000]-[00]-[00] کاراکترهای +7، (، )، فاصله و خط تیره پسوند هستند و توسط کاربر قابل حذف نیستند. پسوند به کاربر کمک می‌کند تا قبل از شروع ورودی، قالب مورد انتظار را درک کند.

انواع ماسک بر اساس کاربرد

ماسک‌های ورودی بر اساس نوع داده‌ای که برای آن طراحی شده‌اند طبقه‌بندی می‌شوند. هر نوع ساختار، تعداد گروه‌ها و محل قرارگیری جداکننده‌های خود را دارد. انتخاب صحیح ماسک برای تجربه کاربری حیاتی است — اگر ماسک با انتظارات کاربر مطابقت نداشته باشد، او کاراکترهای خودکار درج شده را حذف خواهد کرد.

ماسک برای شماره تلفن

ماسک‌های تلفن رایج‌ترین نوع هستند. شماره روسی به صورت +7 ([000]) [000]-[00]-[00] و آمریکایی به صورت +1 ([000]) [000]-[0000] قالب‌بندی می‌شود. ماسک باید تعداد ارقام متفاوت در کد کشور و شهر را پشتیبانی کند. کتابخانه InputMask از ماسک‌های اولویت‌دار پشتیبانی می‌کند: اگر ماسک اول مناسب نباشد (کاربر کد کشور دیگری وارد کرده)، ماسک دوم اعمال می‌شود.

ماسک برای کارت‌های بانکی

برای شماره کارت‌ها از ماسک [0000] [0000] [0000] [0000] با فاصله بین گروه‌های 4 رقمی استفاده می‌شود. علاوه بر این، می‌توان از ماسک برای تاریخ انقضا [00]/[00] و کد CVV [000] استفاده کرد. ماسک شماره کارت بسته به سیستم پرداخت از 16–19 رقم پشتیبانی می‌کند: ویزا و مسترکارت — 16 رقم، امریکن اکسپرس — 15، مسترو — 12–19.

ماسک برای تاریخ‌ها و کدها

ماسک‌های تاریخ از فرمت [00]{.}[00]{.}[0000] با جداکننده نقطه یا خط مورب استفاده می‌کنند. برای INN، SNILS و سایر شناسه‌ها از ماسک‌های تخصصی استفاده می‌شود: INN — [000000000000] (12 رقم)، SNILS — [000]-[000]-[000] [00] (11 رقم با خط تیره). برای کدهای تأیید — [0000] یا [000000] بسته به طول.

پیاده‌سازی ماسک در Swift

پیاده‌سازی ماسک در Swift از طریق تنظیم دلیگیت UITextFieldDelegate با استفاده از کتابخانه InputMask انجام می‌شود. این کتابخانه کلاس MaskedTextFieldDelegate را ارائه می‌دهد که به فیلد متنی متصل می‌شود و ورودی را مطابق با ماسک تعیین شده به طور خودکار قالب‌بندی می‌کند.

import InputMask

class PaymentViewController: UIViewController {

    @IBOutlet var cardField: UITextField!
    @IBOutlet var dateField: UITextField!
    @IBOutlet var cvvField: UITextField!

    var cardListener: MaskedTextFieldDelegate!

    override func viewDidLoad() {
        super.viewDidLoad()
        cardListener = MaskedTextFieldDelegate()
        cardListener.primaryMaskFormat = "[0000] [0000] [0000] [0000]"
        cardField.delegate = cardListener
        dateField.delegate = MaskedTextFieldDelegate(
            primaryMaskFormat: "[00]/[00]"
        )
        cvvField.delegate = MaskedTextFieldDelegate(
            primaryMaskFormat: "[000]"
        )
    }
}

برای شماره تلفن‌ها با تشخیص خودکار کشور از ماسک‌های اولویت‌دار استفاده کنید. MaskedTextFieldDelegate از آرایه‌ای از ماسک‌ها پشتیبانی می‌کند: اولین ماسک مناسب اعمال می‌شود. اگر کاربر کد +1 را وارد کند، فرمت آمریکایی اعمال می‌شود، اگر +7 — فرمت روسی.

let phoneListener = MaskedTextFieldDelegate()
phoneListener.primaryMaskFormat = "+7 ([000]) [000]-[00]-[00]"
phoneListener.affinityMask = [
    "+1 ([000]) [000]-[0000]",
    "+44 [000] [000] [0000]",
    "+49 [000] [0000] [0000]"
]

برای تاریخ با بلوک‌های اختیاری از آکولاد استفاده کنید. اگر کاربر فقط روز را وارد کند، ماسک به صورت «21» نمایش داده می‌شود. اگر روز و ماه را وارد کند — «21.07». اگر هر سه جزء — «21.07.2026». بلوک‌های اختیاری ماسک را تطبیقی می‌کنند و کاربر را مجبور به وارد کردن داده‌هایی که نمی‌خواهد ارائه دهد، نمی‌کنند.

let dateListener = MaskedTextFieldDelegate(
    primaryMaskFormat: "[00]{.}[00]{.}[0000]"
)
dateField.delegate = dateListener

مدیریت چسباندن و حذف

مدیریت صحیح چسباندن یکی از پیچیده‌ترین جنبه‌های پیاده‌سازی ماسک ورودی است. هنگام چسباندن متن (مثلاً شماره کارت از کلیپ‌بورد)، کتابخانه باید همه جداکننده‌ها را از متن چسبانده شده حذف کند، فقط کاراکترهای معنی‌دار را استخراج کرده و ماسک را روی داده‌های خالص اعمال کند. InputMask از RedMadRobot این کار را به طور خودکار از طریق متد shouldChangeCharactersIn انجام می‌دهد.

هنگام چسباندن متن قالب‌بندی شده (با فاصله یا خط تیره)، کتابخانه ابتدا داده‌ها را نرمال می‌کند: همه کاراکترهای نامطابق با الگوی ماسک را حذف می‌کند، سپس ماسک را روی رشته نرمال شده اعمال می‌کند. اگر متن چسبانده شده حاوی کاراکترهای غیرمجاز (حروف در ماسک عددی) باشد، آنها نادیده گرفته می‌شوند.

مدیریت حذف (backspace) در ماسک نیاز به توجه ویژه دارد. هنگام فشار دادن backspace، ماسک باید آخرین کاراکتر معنی‌دار را حذف کند، نه جداکننده ثابت را. اگر مکان‌نما بعد از یک کاراکتر ثابت باشد، backspace باید از آن عبور کرده و کاراکتر معنی‌دار قبلی را حذف کند. InputMask این رفتار را از طریق پشته‌ای از کاراکترهای وارد شده پیاده‌سازی می‌کند.

برای انتخاب و جایگزینی متن، ماسک باید موقعیت‌هایی را که کاربر بخشی از متن را انتخاب کرده و با متن جدید جایگزین می‌کند، به درستی مدیریت کند. کتابخانه InputMask این کار را از طریق متد modifyString در MaskedTextFieldDelegate پشتیبانی می‌کند که محدوده جایگزینی و رشته جدید را دریافت می‌کند.

توصیه‌هایی برای طراحی ماسک

طراحی ماسک با تحلیل نحوه ورود داده توسط کاربر شروع می‌شود. اگر اکثر کاربران فرمت را از حفظ می‌دانند (شماره تلفن)، ماسک باید حداقلی باشد — فقط جداکننده‌ها بین گروه‌ها. اگر فرمت ناآشنا است (SNILS، INN)، ماسک باید با پسوند و توضیحات بیشتر اطلاعاتی باشد.

از ماسک‌های اضافی با تعداد زیادی کاراکتر ثابت خودداری کنید. ماسک +7 ([000]) [000]-[00]-[00] شامل 7 کاراکتر ثابت در مقابل 10 کاراکتر معنی‌دار است — این قابل قبول است. اما ماسک با جداکننده‌های اضافی که کاربر دائماً آن را دور می‌زند، بیشتر از اینکه مفید باشد ضرر دارد. اگر در فرمت شک دارید — از ورود آزاد استفاده کنید.

برای برنامه‌های بین‌المللی در نظر بگیرید که فرمت داده‌ها ممکن است در کشورهای مختلف متفاوت باشد. شماره تلفن در ایالات متحده فرمت +1 (XXX) XXX-XXXX و در ایتالیا +39 XXX XXX XXXX دارد. از ماسک‌های اولویت‌دار با تشخیص خودکار کشور بر اساس کد استفاده کنید یا قبل از وارد کردن شماره، انتخاب کشور را به کاربر ارائه دهید.

طبق تست‌های UX InputMask، کاربران ماسک‌هایی را ترجیح می‌دهند که فرمت را قبل از شروع ورود نشان می‌دهند (از طریق placeholder یا پسوند) و ورود کاراکترها را مسدود نمی‌کنند. ماسک باید یک راهنما باشد، نه یک محدودیت. اگر کاربر کاراکتری نامطابق با ماسک وارد می‌کند، بهتر است به او اجازه این کار داده شود تا اینکه ورود را بدون توضیح دلیل مسدود کرد.