Input Mask: mi ez, beviteli maszkok \u00E9s form\u00E1z\u00E1s

Mi az Input Mask?

Input Mask (beviteli maszk) egy olyan mechanizmus, amely meghatározza a beviteli adatok mintáját és automatikusan formázza a szöveget a gépelés során. A felhasználó csak jelentős karaktereket (számjegyeket, betűket) ír be, a rendszer pedig automatikusan hozzáadja az elválasztójeleket: szóközöket, kötőjeleket, zárójeleket, perjeleket. Ez a legfontosabb különbség az utófeldolgozáshoz képest, ahol az adatok formázása a bevitel befejezése után történik.

A beviteli maszkok a felhasználói élmény három problémáját oldják meg. Az első — kognitív terhelés: a felhasználónak nem kell megjegyeznie az adatformátumot és kézzel elhelyeznie az elválasztójeleket. A második — beviteli sebesség: az elválasztójelek automatikus hozzáadása és a következő karaktercsoportra ugrás felgyorsítja a gépelést. A harmadik — adatminőség: a maszk garantálja, hogy az adatok egységes formátumban, változatok nélkül kerülnek összegyűjtésre.

Ellentétben azokkal a formázókkal NSFormatter, amelyek a már bevitt adatok megjelenítésének szintjén működnek, az Input Mask a bevitel szintjén működik: minden egyes bevitt karaktert vezérel, és meghatározza, hogy az engedélyezett-e a maszk aktuális pozíciójában. Ha a karakter nem felel meg a maszknak, elutasításra vagy figyelmen kívül hagyásra kerül.

Az Apple UX-kutatásai (2024) szerint a beviteli maszkok a leginkább hatékonyak azoknál a mezőknél, ahol a felhasználó ismeretlen formátumban ad meg adatokat. Például SNILS (000-000-000 00) vagy INN (000000000000) — a felhasználó nem biztos, hogy ismeri a számjegyek pontos számát vagy az elválasztójelek helyét, és a maszk vizuálisan jelzi a helyes formátumot.

A beviteli maszk szintaxisa

A maszk szintaxisa az InputMask könyvtárban helyettesítő karakterek és konstans karakterek kombinációját használja. A helyettesítők meghatározzák az engedélyezett karakter típusát minden pozícióban: 0 vagy 9 számjegyekhez, A betűkhöz, _ bármilyen karakterhez. A konstans karakterek az automatikusan hozzáadott elválasztójelek: szóközök, kötőjelek, zárójelek, pontok, perjelek.

Kötelező és opcionális blokkok

A szögletes zárójelek [0] kötelező karaktert jelölnek — a felhasználónak számjegyet kell beírnia ezen a pozíción. A kapcsos zárójelek {0} opcionális karaktert jelölnek — ha a felhasználó kihagyja a blokkot, a maszk nem illeszti be a megfelelő elválasztójeleket. Például a [00]{.}[00]{.}[0000] maszk dátumhoz: ha a felhasználó nem adja meg a hónapot, a nap utáni elválasztó sem jelenik meg.

A maszk affixa

A konstans karakterek a szögletes és kapcsos zárójeleken kívül affixot alkotnak — mindig megjelennek, még akkor is, ha a mező üres. Például a +7 ([000]) [000]-[00]-[00] maszkban a +7, (, ), szóköz és kötőjel karakterek affixok, és a felhasználó nem távolíthatja el őket. Az affix segít a felhasználónak megérteni a várt formátumot még a bevitel megkezdése előtt.

Maszk típusok rendeltetés szerint

A beviteli maszkok az adattípus szerint osztályozhatók, amelyekre tervezték őket. Minden típusnak saját szerkezete, csoportszáma és elválasztójel-elhelyezése van. A maszk helyes kiválasztása kritikus a felhasználói élmény szempontjából — ha a maszk nem felel meg a felhasználó elvárásainak, akkor eltávolítja az automatikusan beszúrt karaktereket.

Maszkok telefonszámokhoz

A telefonmaszkok — a leggyakoribb típus. Az orosz szám formátuma +7 ([000]) [000]-[00]-[00], az amerikai +1 ([000]) [000]-[0000]. A maszknak támogatnia kell a különböző számjegyszámokat az ország- és városkódban. Az InputMask könyvtár támogatja a prioritásos maszkokat: ha az első maszk nem illeszkedik (a felhasználó másik ország kódját adta meg), a második kerül alkalmazásra.

Maszkok bankkártyákhoz

A kártyaszámokhoz a [0000] [0000] [0000] [0000] maszk használatos szóközökkel a 4 számjegyből álló csoportok között. Emellett maszk alkalmazható a lejárati dátumhoz [00]/[00] és a CVV kódhoz [000]. A kártyaszám maszk a fizetési rendszertől függően 16–19 számjegyet támogat: Visa és Mastercard — 16 számjegy, American Express — 15, Maestro — 12–19.

Maszkok dátumokhoz és kódokhoz

A dátummaszkok a [00]{.}[00]{.}[0000] formátumot használják pont vagy perjel elválasztóval. Az INN, SNILS és más azonosítókhoz speciális maszkok használatosak: INN — [000000000000] (12 számjegy), SNILS — [000]-[000]-[000] [00] (11 számjegy kötőjelekkel). Megerősítő kódokhoz — [0000] vagy [000000] a hossztól függően.

Maszk implementálása Swift-ben

A maszk implementálása Swift-ben az UITextFieldDelegate delegált beállításával történik az InputMask könyvtár használatával. A könyvtár biztosítja a MaskedTextFieldDelegate osztályt, amely csatlakozik a szövegmezőhöz, és automatikusan formázza a bevitelt a megadott maszk szerint.

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

A telefonszámokhoz automatikus országfelismeréssel használjon prioritásos maszkokat. A MaskedTextFieldDelegate maszkok tömbjét támogatja: az első illeszkedő kerül alkalmazásra. Ha a felhasználó +1 kódot ír be, az amerikai formátum, ha +7 — az orosz formátum kerül alkalmazásra.

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

Az opcionális blokkokkal rendelkező dátumhoz használjon kapcsos zárójeleket. Ha a felhasználó csak a napot adja meg, a maszk „21"-ként jelenik meg. Ha a napot és a hónapot is megadja — „21.07". Ha mindhárom összetevőt — „21.07.2026". Az opcionális blokkok adaptívvá teszik a maszkot, és nem kényszerítik a felhasználót olyan adatok megadására, amelyeket nem kíván megosztani.

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

Beillesztés és törlés kezelése

A beillesztés helyes kezelése — a beviteli maszk megvalósításának egyik legösszetettebb aspektusa. Szöveg beillesztésekor (például kártyaszám a vágólapról) a könyvtárnak el kell távolítania az összes elválasztót a beillesztett szövegből, ki kell vonnia csak a jelentős karaktereket, és alkalmaznia kell a maszkot a tiszta adatokra. A RedMadRobot InputMask ezt automatikusan végzi a shouldChangeCharactersIn metóduson keresztül.

Formázott szöveg beillesztésekor (szóközökkel vagy kötőjelekkel) a könyvtár először normalizálja az adatokat: eltávolít minden olyan karaktert, amely nem felel meg a maszk mintájának, majd alkalmazza a maszkot a normalizált karakterláncra. Ha a beillesztett szöveg nem engedélyezett karaktereket tartalmaz (betűk numerikus maszkban), azok figyelmen kívül maradnak.

A törlés (backspace) kezelése a maszkban különös figyelmet igényel. A backspace megnyomásakor a maszknak az utolsó jelentős karaktert kell törölnie, nem a konstans elválasztót. Ha a kurzor egy konstans karakter után van, a backspace-nek át kell ugrania azt, és törölnie kell az előző jelentős karaktert. Az InputMask ezt a viselkedést a bevitt karakterek vermén keresztül valósítja meg.

A szöveg kijelöléséhez és cseréjéhez a maszknak helyesen kell kezelnie azokat a helyzeteket, amikor a felhasználó kijelöli a szöveg egy részét és újjal helyettesíti. Az InputMask könyvtár ezt a MaskedTextFieldDelegate modifyString metódusán keresztül támogatja, amely megkapja a csere tartományát és az új karakterláncot.

Javaslatok maszkok tervezéséhez

A maszk tervezése annak elemzésével kezdődik, hogy a felhasználó hogyan fogja bevinni az adatokat. Ha a legtöbb felhasználó fejből ismeri a formátumot (telefonszám), a maszk legyen minimális — csak elválasztók a csoportok között. Ha a formátum ismeretlen (SNILS, INN), a maszk legyen informatívabb, affix-szal és címkékkel.

Kerülje a túlzott maszkokat sok konstans karakterrel. A +7 ([000]) [000]-[00]-[00] maszk 7 konstans karaktert tartalmaz 10 jelentős karakterhez képest — ez elfogadható. De egy olyan maszk túlzott elválasztókkal, amelyet a felhasználó folyamatosan megkerül, több kárt okoz, mint hasznot. Ha bizonytalan a formátumban — használjon szabad bevitelt.

Nemzetközi alkalmazásokhoz vegye figyelembe, hogy az adatformátum országonként eltérő lehet. Az USA-ban a telefonszám formátuma +1 (XXX) XXX-XXXX, Olaszországban pedig +39 XXX XXX XXXX. Használjon prioritásos maszkokat automatikus országfelismeréssel a kód alapján, vagy biztosítson a felhasználónak országválasztási lehetőséget a szám megadása előtt.

Az InputMask UX-tesztelése szerint a felhasználók azokat a maszkokat részesítik előnyben, amelyek a bevitel megkezdése előtt mutatják a formátumot (placeholder vagy affix segítségével), és nem blokkolják a karakterek bevitelét. A maszk legyen útmutatás, nem korlátozás. Ha a felhasználó a maszknak nem megfelelő karaktert ír be, jobb engedni neki, mint blokkolni a bevitelt az ok magyarázata nélkül.