Input Mask: ce este, m\u0103\u0219ti de intrare \u0219i formatare

Ce este Input Mask?

Input Mask (mască de intrare) este un mecanism care definește modelul datelor introduse și formatează automat textul pe măsură ce este tastat. Utilizatorul introduce doar caractere semnificative (cifre, litere), iar sistemul adaugă automat separatori: spații, cratime, paranteze, bare oblice. Aceasta este diferența cheie față de post-procesare, unde datele sunt formatate după finalizarea intrării.

Măștile de intrare rezolvă trei probleme ale experienței utilizatorului. Prima — sarcina cognitivă: utilizatorul nu trebuie să memoreze formatul datelor și să plaseze manual separatorii. A doua — viteza de introducere: adăugarea automată a separatorilor și trecerea la următorul grup de caractere accelerează tastarea. A treia — calitatea datelor: masca garantează că datele vor fi colectate într-un format uniform, fără variații.

Spre deosebire de formatoarele NSFormatter, care funcționează la nivelul afișării datelor deja introduse, Input Mask funcționează la nivelul intrării: controlează fiecare caracter introdus și stabilește dacă acesta este permis în poziția curentă a măștii. Dacă caracterul nu corespunde măștii, este respins sau ignorat.

Conform cercetărilor UX Apple (2024), măștile de intrare sunt cele mai eficiente pentru câmpurile în care utilizatorul introduce date într-un format necunoscut. De exemplu, SNILS (000-000-000 00) sau INN (000000000000) — utilizatorul poate să nu cunoască numărul exact de cifre sau amplasarea separatorilor, iar masca indică vizual formatul corect.

Sintaxa măștii de intrare

Sintaxa măștii în biblioteca InputMask utilizează o combinație de caractere de tip substituent și caractere constante. Substituenții determină tipul de caracter permis pe fiecare poziție: 0 sau 9 pentru cifre, A pentru litere, _ pentru orice caracter. Caracterele constante sunt separatorii care se adaugă automat: spații, cratime, paranteze, puncte, bare oblice.

Blocuri obligatorii și opționale

Parantezele pătrate [0] indică un caracter obligatoriu — utilizatorul trebuie să introducă o cifră în această poziție. Acoladele {0} indică un caracter opțional — dacă utilizatorul omite blocul, masca nu inserează separatorii corespunzători. De exemplu, masca [00]{.}[00]{.}[0000] pentru dată: dacă utilizatorul nu introduce luna, separatorul după zi nu este afișat.

Afixul măștii

Caracterele constante în afara parantezelor pătrate și acoladelor constituie afixul — ele sunt afișate întotdeauna, chiar dacă câmpul este gol. De exemplu, în masca +7 ([000]) [000]-[00]-[00] caracterele +7, (, ), spațiul și cratima sunt afix și nu pot fi eliminate de utilizator. Afixul ajută utilizatorul să înțeleagă formatul așteptat înainte de a începe introducerea.

Tipuri de măști după destinație

Măștile de intrare sunt clasificate în funcție de tipul de date pentru care sunt destinate. Fiecare tip are propria structură, număr de grupuri și amplasare a separatorilor. Alegerea corectă a măștii este critică pentru experiența utilizatorului — dacă masca nu corespunde așteptărilor utilizatorului, acesta va șterge caracterele inserate automat.

Măști pentru numere de telefon

Măștile telefonice — cel mai răspândit tip. Numărul rusesc se formatează ca +7 ([000]) [000]-[00]-[00], cel american ca +1 ([000]) [000]-[0000]. Masca trebuie să suporte un număr diferit de cifre în codul țării și al orașului. Biblioteca InputMask suportă măști prioritare: dacă prima mască nu se potrivește (utilizatorul a introdus codul altei țări), se aplică a doua.

Măști pentru carduri bancare

Pentru numerele de card se folosește masca [0000] [0000] [0000] [0000] cu spații între grupuri de câte 4 cifre. Suplimentar, poate fi aplicată o mască pentru data expirării [00]/[00] și codul CVV [000]. Masca pentru numărul de card suportă 16–19 cifre în funcție de sistemul de plată: Visa și Mastercard — 16 cifre, American Express — 15, Maestro — 12–19.

Măști pentru date și coduri

Măștile de date folosesc formatul [00]{.}[00]{.}[0000] cu separator sub formă de punct sau bară oblică. Pentru INN, SNILS și alți identificatori se aplică măști specializate: INN — [000000000000] (12 cifre), SNILS — [000]-[000]-[000] [00] (11 cifre cu cratime). Pentru coduri de confirmare — [0000] sau [000000] în funcție de lungime.

Implementarea măștii în Swift

Implementarea măștii în Swift se realizează prin setarea delegatului UITextFieldDelegate cu ajutorul bibliotecii InputMask. Biblioteca oferă clasa MaskedTextFieldDelegate, care se conectează la câmpul text și formatează automat introducerea conform măștii specificate.

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

Pentru numerele de telefon cu detectare automată a țării, utilizați măști prioritare. MaskedTextFieldDelegate suportă un array de măști: prima care se potrivește este aplicată. Dacă utilizatorul introduce codul +1, se aplică formatul american, dacă +7 — cel rusesc.

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

Pentru data cu blocuri opționale utilizați acolade. Dacă utilizatorul introduce doar ziua, masca se afișează ca „21". Dacă introduce ziua și luna — „21.07". Dacă toate cele trei componente — „21.07.2026". Blocurile opționale fac masca adaptivă și nu obligă utilizatorul să introducă date pe care nu dorește să le furnizeze.

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

Gestionarea lipirii și ștergerii

Gestionarea corectă a lipirii — unul dintre cele mai dificile aspecte ale implementării măștii de intrare. La lipirea textului (de exemplu, a numărului de card din clipboard), biblioteca trebuie să elimine toți separatorii din textul lipit, să extragă doar caracterele semnificative și să aplice masca datelor curate. InputMask de la RedMadRobot face acest lucru automat prin metoda shouldChangeCharactersIn.

La lipirea textului formatat (cu spații sau cratime), biblioteca normalizează mai întâi datele: elimină toate caracterele care nu corespund modelului măștii, apoi aplică masca șirului normalizat. Dacă textul lipit conține caractere nepermise (litere în masca numerică), acestea sunt ignorate.

Gestionarea ștergerii (backspace) în mască necesită o atenție deosebită. La apăsarea backspace, masca trebuie să șteargă ultimul caracter semnificativ, nu separatorul constant. Dacă cursorul se află după un caracter constant, backspace trebuie să îl sară și să șteargă caracterul semnificativ anterior. InputMask implementează acest comportament printr-un stivă de caractere introduse.

Pentru selectarea și înlocuirea textului, masca trebuie să gestioneze corect situațiile în care utilizatorul selectează o parte a textului și o înlocuiește cu una nouă. Biblioteca InputMask suportă acest lucru prin metoda modifyString din MaskedTextFieldDelegate, care primește intervalul de înlocuire și noul șir.

Recomandări pentru proiectarea măștilor

Proiectarea măștii începe cu analiza modului în care utilizatorul va introduce datele. Dacă majoritatea utilizatorilor cunosc formatul pe de rost (numărul de telefon), masca ar trebui să fie minimală — doar separatori între grupuri. Dacă formatul este necunoscut (SNILS, INN), masca ar trebui să fie mai informativă, cu afix și etichete.

Evitați măștile redundante cu un număr mare de caractere constante. Masca +7 ([000]) [000]-[00]-[00] conține 7 caractere constante la 10 semnificative — este acceptabil. Dar o mască cu separatori redundanți, pe care utilizatorul o ocolește constant, face mai mult rău decât bine. Dacă nu sunteți sigur de format — utilizați introducerea liberă.

Pentru aplicațiile internaționale luați în considerare că formatul datelor poate diferi în diferite țări. Numărul de telefon în SUA are formatul +1 (XXX) XXX-XXXX, iar în Italia — +39 XXX XXX XXXX. Utilizați măști prioritare cu detectare automată a țării după cod sau oferiți utilizatorului posibilitatea de a alege țara înainte de introducerea numărului.

Conform testărilor UX InputMask, utilizatorii preferă măștile care arată formatul înainte de începerea introducerii (prin placeholdere sau afix) și nu blochează introducerea caracterelor. Masca ar trebui să fie un indiciu, nu o restricție. Dacă utilizatorul introduce un caracter care nu corespunde măștii, este mai bine să îi permită acest lucru decât să blocheze introducerea fără a explica motivul.