Input Mask: bu n\u0259dir, giri\u015f maskalar\u0131 v\u0259 formatlama

Input Mask nədir?

Input Mask (giriş maskası) — daxil edilən məlumatların nümunəsini müəyyən edən və mətni daxil edildikcə avtomatik formatlayan mexanizmdir. İstifadəçi yalnız əhəmiyyətli simvolları (rəqəmlər, hərflər) daxil edir, sistem isə avtomatik olaraq ayırıcıları əlavə edir: boşluqlar, defislər, mötərizələr, xətlər. Bu, məlumatların daxil edilməsi tamamlandıqdan sonra formatlandığı post-emalından əsas fərqdir.

Giriş maskaları istifadəçi təcrübəsinin üç problemini həll edir. Birinci — idrak yükü: istifadəçi məlumat formatını yadda saxlamalı və ayırıcıları əl ilə yerləşdirməli deyil. İkinci — daxiletmə sürəti: ayırıcıların avtomatik əlavə edilməsi və növbəti simvol qrupuna keçid yazmağı sürətləndirir. Üçüncü — məlumat keyfiyyəti: maska məlumatların variasiyasız vahid formatda toplanmasını təmin edir.

Artıq daxil edilmiş məlumatların göstərilməsi səviyyəsində işləyən formatlayıcılardan NSFormatter fərqli olaraq, Input Mask daxiletmə səviyyəsində işləyir: hər bir daxil edilən simvolu idarə edir və maskanın cari mövqeyində ona icazə verilib-verilmədiyini müəyyən edir. Simvol maskaya uyğun gəlmirsə, o rədd edilir və ya nəzərə alınmır.

Apple UX tədqiqatlarına (2024) görə, giriş maskaları istifadəçinin məlumatları tanış olmayan formatda daxil etdiyi sahələr üçün ən effektivdir. Məsələn, SNILS (000-000-000 00) və ya INN (000000000000) — istifadəçi rəqəmlərin dəqiq sayını və ya ayırıcıların yerini bilməyə bilər və maska vizual olaraq düzgün formatı göstərir.

Giriş maskasının sintaksisi

Maska sintaksisi InputMask kitabxanasında yer tutan simvolların və sabit simvolların kombinasiyasından istifadə edir. Yer tutanlar hər mövqedə icazə verilən simvol tipini müəyyən edir: rəqəmlər üçün 0 və ya 9, hərflər üçün A, istənilən simvol üçün _. Sabit simvollar avtomatik əlavə edilən ayırıcılardır: boşluqlar, defislər, mötərizələr, nöqtələr, xətlər.

Məcburi və isteğe bağlı bloklar

Kvadrat mötərizələr [0] məcburi simvolu bildirir — istifadəçi bu mövqedə rəqəm daxil etməlidir. Qıvrımlı mötərizələr {0} isteğe bağlı simvolu bildirir — istifadəçi bloku atlayarsa, maska müvafiq ayırıcıları əlavə etmir. Məsələn, tarix üçün [00]{.}[00]{.}[0000] maskası: istifadəçi ayı daxil etmədikdə, gündən sonrakı ayırıcı da göstərilmir.

Maska affiksi

Sabit simvollar kvadrat və qıvrımlı mötərizələrdən kənarda affiksi təşkil edir — onlar sahə boş olsa belə həmişə göstərilir. Məsələn, +7 ([000]) [000]-[00]-[00] maskasında +7, (, ), boşluq və defis simvolları affiksdir və istifadəçi tərəfindən silinə bilməz. Affiks istifadəçiyə daxiletmə başlamazdan əvvəl gözlənilən formatı anlamağa kömək edir.

Təyinatına görə maska növləri

Giriş maskaları təyinatına görə məlumat növünə əsasən təsnif edilir. Hər növün öz strukturu, qrup sayı və ayırıcıların yerləşməsi var. Maskanın düzgün seçilməsi istifadəçi təcrübəsi üçün kritikdir — maska istifadəçinin gözləntilərinə uyğun gəlmirsə, o avtomatik əlavə edilmiş simvolları siləcək.

Telefon nömrələri üçün maskalar

Telefon maskaları — ən geniş yayılmış növdür. Rusiya nömrəsi +7 ([000]) [000]-[00]-[00], Amerika nömrəsi +1 ([000]) [000]-[0000] kimi formatlanır. Maska ölkə kodu və şəhər kodunda müxtəlif sayda rəqəmləri dəstəkləməlidir. InputMask kitabxanası prioritet maskaları dəstəkləyir: birinci maska uyğun gəlmirsə (istifadəçi başqa ölkənin kodunu daxil edibsə), ikinci tətbiq edilir.

Bank kartları üçün maskalar

Kart nömrələri üçün [0000] [0000] [0000] [0000] maskası 4 rəqəmdən ibarət qruplar arasında boşluqlarla istifadə olunur. Əlavə olaraq, istifadə müddəti [00]/[00] və CVV kodu [000] üçün maskalar tətbiq edilə bilər. Kart nömrəsi maskası ödəniş sistemindən asılı olaraq 16–19 rəqəmi dəstəkləyir: Visa və Mastercard — 16 rəqəm, American Express — 15, Maestro — 12–19.

Tarixlər və kodlar üçün maskalar

Tarix maskaları nöqtə və ya xətt ayırıcısı ilə [00]{.}[00]{.}[0000] formatından istifadə edir. INN, SNILS və digər identifikatorlar üçün xüsusi maskalar tətbiq olunur: INN — [000000000000] (12 rəqəm), SNILS — [000]-[000]-[000] [00] (defislərlə 11 rəqəm). Təsdiq kodları üçün — uzunluqdan asılı olaraq [0000] və ya [000000].

Swift-də maskanın tətbiqi

Maskanın tətbiqi Swift-də InputMask kitabxanasından istifadə edərək UITextFieldDelegate delegatının qurulması ilə həyata keçirilir. Kitabxana mətn sahəsinə qoşulan və verilmiş maskaya uyğun olaraq daxiletməni avtomatik formatlayan MaskedTextFieldDelegate sinfini təqdim edir.

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 nömrələri üçün avtomatik ölkə təyini ilə prioritet maskalardan istifadə edin. MaskedTextFieldDelegate maskalar massivini dəstəkləyir: uyğun gələn birinci tətbiq edilir. İstifadəçi +1 kodunu daxil edərsə, Amerika formatı, +7 daxil edərsə — Rusiya formatı tətbiq edilir.

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

İsteğe bağlı blokları olan tarix üçün qıvrımlı mötərizələrdən istifadə edin. İstifadəçi yalnız günü daxil edərsə, maska „21" kimi göstərilir. Gün və ayı daxil edərsə — „21.07". Hər üç komponenti daxil edərsə — „21.07.2026". İsteğe bağlı bloklar maskanı adaptiv edir və istifadəçini təqdim etmək istəmədiyi məlumatları daxil etməyə məcbur etmir.

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

Əlavə etmə və silmənin idarə edilməsi

Düzgün əlavə etmənin idarə edilməsi — giriş maskasının tətbiqinin ən çətin aspektlərindən biridir. Mətn əlavə edilərkən (məsələn, buferdən kart nömrəsi) kitabxana əlavə edilən mətndən bütün ayırıcıları silməli, yalnız əhəmiyyətli simvolları çıxarmalı və təmiz məlumatlara maskanı tətbiq etməlidir. RedMadRobot-dan InputMask bunu shouldChangeCharactersIn metodu vasitəsilə avtomatik edir.

Formatlanmış mətn əlavə edilərkən (boşluqlar və ya defislərlə) kitabxana əvvəlcə məlumatları normallaşdırır: maska nümunəsinə uyğun gəlməyən bütün simvolları silir, sonra normallaşdırılmış sətirə maskanı tətbiq edir. Əlavə edilən mətndə icazə verilməyən simvollar (rəqəm maskasında hərflər) varsa, onlar nəzərə alınmır.

Maskada silmənin (backspace) idarə edilməsi xüsusi diqqət tələb edir. Backspace basıldıqda maska son əhəmiyyətli simvolu silməlidir, sabit ayırıcını yox. Kursor sabit simvoldan sonradırsa, backspace onu keçməli və əvvəlki əhəmiyyətli simvolu silməlidir. InputMask bu davranışı daxil edilmiş simvolların yığını vasitəsilə tətbiq edir.

Mətnin seçilməsi və dəyişdirilməsi üçün maska istifadəçinin mətnin bir hissəsini seçib yenisi ilə əvəz etdiyi vəziyyətləri düzgün idarə etməlidir. InputMask kitabxanası bunu MaskedTextFieldDelegate-də dəyişdirmə diapazonu və yeni sətir qəbul edən modifyString metodu vasitəsilə dəstəkləyir.

Maskaların layihələndirilməsi üçün tövsiyələr

Maskanın layihələndirilməsi istifadəçinin məlumatları necə daxil edəcəyinin təhlili ilə başlayır. İstifadəçilərin əksəriyyəti formatı əzbər bilirsə (telefon nömrəsi), maska minimal olmalıdır — yalnız qruplar arasında ayırıcılar. Format tanış deyilsə (SNILS, INN), maska affiks və izahatlarla daha informativ olmalıdır.

Çox sayda sabit simvolu olan həddindən artıq maskalardan qaçının. +7 ([000]) [000]-[00]-[00] maskası 10 əhəmiyyətli simvola 7 sabit simvol ehtiva edir — bu məqbuldur. Lakin istifadəçinin daim keçdiyi həddindən artıq ayırıcıları olan maska faydadan çox zərər gətirir. Formata şübhə edirsinizsə — sərbəst daxiletmədən istifadə edin.

Beynəlxalq tətbiqlər üçün məlumat formatının müxtəlif ölkələrdə fərqlənə biləcəyini nəzərə alın. ABŞ-da telefon nömrəsi +1 (XXX) XXX-XXXX, İtaliyada isə +39 XXX XXX XXXX formatına malikdir. Koda görə avtomatik ölkə təyini ilə prioritet maskalardan istifadə edin və ya nömrə daxil etməzdən əvvəl istifadəçiyə ölkə seçimini təqdim edin.

InputMask UX testlərinə görə, istifadəçilər daxiletmə başlamazdan əvvəl formatı göstərən (placeholder və ya affiks vasitəsilə) və simvol daxiletməsini bloklamayan maskalara üstünlük verirlər. Maska bir məhdudiyyət deyil, ipucu olmalıdır. İstifadəçi maskaya uyğun gəlməyən simvol daxil edərsə, səbəbi izah etmədən daxiletməni bloklamaqdansa, ona icazə vermək daha yaxşıdır.