Input Mask: bu nima, kiritish maskalari va formatlash

Input Mask nima?

Input Mask (kiritish maskasi) — kiritiladigan ma'lumotlarning namunasini aniqlaydigan va matn terilishi bilan avtomatik ravishda formatlaydigan mexanizmdir. Foydalanuvchi faqat muhim belgilarni (raqamlar, harflar) kiritadi, tizim esa avtomatik ravishda ajratgichlarni qo'shadi: bo'shliqlar, defislar, qavslar, chiziqlar. Bu ma'lumotlar kiritish tugagandan so'ng formatlanadigan post-ishlov berishdan asosiy farqdir.

Kiritish maskalari foydalanuvchi tajribasining uch muammosini hal qiladi. Birinchisi — kognitiv yuk: foydalanuvchi ma'lumot formatini eslab qolishi va ajratgichlarni qo'lda joylashtirishi shart emas. Ikkinchisi — kiritish tezligi: ajratgichlarning avtomatik qo'shilishi va keyingi belgilar guruhiga o'tish terishni tezlashtiradi. Uchinchisi — ma'lumot sifati: maska ma'lumotlarning o'zgarishsiz yagona formatda to'planishini kafolatlaydi.

Oldindan kiritilgan ma'lumotlarni ko'rsatish darajasida ishlaydigan formatlovchilardan NSFormatter farqli o'laroq, Input Mask kiritish darajasida ishlaydi: har bir kiritilgan belgini nazorat qiladi va maskaning joriy pozitsiyasida unga ruxsat berilgan yoki yo'qligini aniqlaydi. Agar belgi maskaga mos kelmasa, u rad etiladi yoki e'tiborga olinmaydi.

Apple UX tadqiqotlariga (2024) ko'ra, kiritish maskalari foydalanuvchi ma'lumotlarni notanish formatda kiritadigan maydonlar uchun eng samarali hisoblanadi. Masalan, SNILS (000-000-000 00) yoki INN (000000000000) — foydalanuvchi raqamlarning aniq sonini yoki ajratgichlarning joylashishini bilmasligi mumkin va maska vizual ravishda to'g'ri formatni ko'rsatadi.

Kiritish maskasi sintaksisi

Maska sintaksisi InputMask kutubxonasida to'ldiruvchi belgilar va doimiy belgilarning kombinatsiyasidan foydalanadi. To'ldiruvchilar har bir pozitsiyada ruxsat etilgan belgi turini aniqlaydi: raqamlar uchun 0 yoki 9, harflar uchun A, istalgan belgi uchun _. Doimiy belgilar avtomatik ravishda qo'shiladigan ajratgichlardir: bo'shliqlar, defislar, qavslar, nuqtalar, chiziqlar.

Majburiy va ixtiyoriy bloklar

Kvadrat qavslar [0] majburiy belgini bildiradi — foydalanuvchi bu pozitsiyada raqam kiritishi kerak. Figurali qavslar {0} ixtiyoriy belgini bildiradi — agar foydalanuvchi blokni o'tkazib yuborsa, maska tegishli ajratgichlarni qo'shmaydi. Masalan, sana uchun [00]{.}[00]{.}[0000] maskasi: agar foydalanuvchi oyni kiritmasa, kundan keyingi ajratgich ham ko'rsatilmaydi.

Maska affiksi

Doimiy belgilar kvadrat va figurali qavslardan tashqarida affiksni tashkil qiladi — ular maydon bo'sh bo'lsa ham har doim ko'rsatiladi. Masalan, +7 ([000]) [000]-[00]-[00] maskasida +7, (, ), bo'shliq va defis belgilari affiksdir va foydalanuvchi tomonidan o'chirib bo'lmaydi. Affiks foydalanuvchiga kiritish boshlanishidan oldin kutilayotgan formatni tushunishga yordam beradi.

Maqsadiga ko'ra maska turlari

Kiritish maskalari mo'ljallangan ma'lumot turiga qarab tasniflanadi. Har bir turning o'z tuzilishi, guruhlar soni va ajratgichlarning joylashuvi bor. Maskaning to'g'ri tanlanishi foydalanuvchi tajribasi uchun muhim — agar maska foydalanuvchining kutganlariga mos kelmasa, u avtomatik qo'shilgan belgilarni o'chirib tashlaydi.

Telefon raqamlari uchun maskalar

Telefon maskalari — eng keng tarqalgan tur. Rossiya raqami +7 ([000]) [000]-[00]-[00], Amerika raqami +1 ([000]) [000]-[0000] sifatida formatlanadi. Maska davlat kodi va shahar kodida turli xil raqamlar sonini qo'llab-quvvatlashi kerak. InputMask kutubxonasi ustuvor maskalarni qo'llab-quvvatlaydi: agar birinchi maska mos kelmasa (foydalanuvchi boshqa davlat kodini kiritgan bo'lsa), ikkinchisi qo'llaniladi.

Bank kartalari uchun maskalar

Karta raqamlari uchun [0000] [0000] [0000] [0000] maskasi 4 ta raqamdan iborat guruhlar orasida bo'shliqlar bilan ishlatiladi. Qo'shimcha ravishda, amal qilish muddati [00]/[00] va CVV kodi [000] uchun maskalar qo'llanilishi mumkin. Karta raqami maskasi to'lov tizimiga qarab 16–19 raqamni qo'llab-quvvatlaydi: Visa va Mastercard — 16 raqam, American Express — 15, Maestro — 12–19.

Sanalar va kodlar uchun maskalar

Sana maskalari nuqta yoki chiziq ajratgichi bilan [00]{.}[00]{.}[0000] formatidan foydalanadi. INN, SNILS va boshqa identifikatorlar uchun ixtisoslashtirilgan maskalar qo'llaniladi: INN — [000000000000] (12 raqam), SNILS — [000]-[000]-[000] [00] (defislar bilan 11 raqam). Tasdiqlash kodlari uchun — uzunlikka qarab [0000] yoki [000000].

Swift-da maskani amalga oshirish

Maskaning amalga oshirilishi Swift-da InputMask kutubxonasidan foydalanib UITextFieldDelegate delegatini o'rnatish orqali amalga oshiriladi. Kutubxona matn maydoniga ulanadigan va berilgan maskaga muvofiq kiritishni avtomatik formatlaydigan MaskedTextFieldDelegate sinfini taqdim etadi.

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]"
        )
    }
}

Telefon raqamlari uchun avtomatik davlat aniqlash bilan ustuvor maskalardan foydalaning. MaskedTextFieldDelegate maskalar massivini qo'llab-quvvatlaydi: mos keladigan birinchisi qo'llaniladi. Agar foydalanuvchi +1 kodini kiritsa, Amerika formati, +7 kiritsa — Rossiya formati qo'llaniladi.

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

Ixtiyoriy bloklari bo'lgan sana uchun figurali qavslardan foydalaning. Agar foydalanuvchi faqat kunni kiritsa, maska „21" sifatida ko'rsatiladi. Agar kun va oyni kiritsa — „21.07". Agar uchala komponentni kiritsa — „21.07.2026". Ixtiyoriy bloklar maskani moslashuvchan qiladi va foydalanuvchini taqdim etishni istamagan ma'lumotlarini kiritishga majburlamaydi.

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

Qo'yish va o'chirishni boshqarish

To'g'ri qo'yishni boshqarish — kiritish maskasini amalga oshirishning eng murakkab jihatlaridan biri. Matn qo'yilganda (masalan, buferdan karta raqami), kutubxona qo'yilgan matndan barcha ajratgichlarni olib tashlashi, faqat muhim belgilarni ajratib olishi va toza ma'lumotlarga maskani qo'llashi kerak. RedMadRobot-dan InputMask buni shouldChangeCharactersIn metodi orqali avtomatik amalga oshiradi.

Formatlangan matn qo'yilganda (bo'shliqlar yoki defislar bilan) kutubxona avval ma'lumotlarni normallashtiradi: maska namunasiga mos kelmaydigan barcha belgilarni olib tashlaydi, so'ngra normallashtirilgan qatorga maskani qo'llaydi. Qo'yilgan matnda ruxsat etilmagan belgilar (raqam maskasida harflar) bo'lsa, ular e'tiborga olinmaydi.

Maskada o'chirishni (backspace) boshqarish alohida e'tibor talab qiladi. Backspace bosilganda, maska oxirgi muhim belgini o'chirishi kerak, doimiy ajratgichni emas. Kursor doimiy belgidan keyin bo'lsa, backspace uni o'tkazib yuborishi va oldingi muhim belgini o'chirishi kerak. InputMask bu xatti-harakatni kiritilgan belgilar steki orqali amalga oshiradi.

Matnni tanlash va almashtirish uchun maska foydalanuvchi matnning bir qismini tanlab, uni yangisi bilan almashtirgan vaziyatlarni to'g'ri boshqarishi kerak. InputMask kutubxonasi buni MaskedTextFieldDelegate-dagi almashtirish diapazoni va yangi qatorni qabul qiladigan modifyString metodi orqali qo'llab-quvvatlaydi.

Maskalarni loyihalash bo'yicha tavsiyalar

Maskani loyihalash foydalanuvchi ma'lumotlarni qanday kiritishini tahlil qilish bilan boshlanadi. Agar foydalanuvchilarning aksariyati formatni yoddan bilsa (telefon raqami), maska minimal bo'lishi kerak — faqat guruhlar orasidagi ajratgichlar. Agar format notanish bo'lsa (SNILS, INN), maska affiks va izohlar bilan ko'proq ma'lumotga ega bo'lishi kerak.

Ko'p sonli doimiy belgilarga ega ortiqcha maskalardan saqlaning. +7 ([000]) [000]-[00]-[00] maskasi 10 ta muhim belgiga 7 ta doimiy belgini o'z ichiga oladi — bu maqbul. Ammo foydalanuvchi doim chetlab o'tadigan ortiqcha ajratgichli maska foydadan ko'ra zarar keltiradi. Agar formatga shubha qilsangiz — erkin kiritishdan foydalaning.

Xalqaro ilovalar uchun ma'lumot formati turli mamlakatlarda farq qilishi mumkinligini hisobga oling. AQShda telefon raqami +1 (XXX) XXX-XXXX, Italiyada esa +39 XXX XXX XXXX formatiga ega. Kod bo'yicha avtomatik davlat aniqlash bilan ustuvor maskalardan foydalaning yoki raqam kiritishdan oldin foydalanuvchiga davlat tanlash imkoniyatini bering.

InputMask UX testlariga ko'ra, foydalanuvchilar kiritish boshlanishidan oldin formatni ko'rsatadigan (placeholder yoki affiks orqali) va belgi kiritishini bloklamaydigan maskalarni afzal ko'radilar. Maska cheklov emas, maslahat bo'lishi kerak. Agar foydalanuvchi maskaga mos kelmaydigan belgi kiritsa, sababini tushuntirmasdan kiritishni bloklashdan ko'ra, unga ruxsat berish yaxshiroqdir.