Input Mask: co to je, vstupní masky a formátování

Co je Input Mask?

Input Mask (vstupní maska) je mechanismus, který určuje vzor zadávaných dat a automaticky formátuje text během psaní. Uživatel zadává pouze významné znaky (číslice, písmena) a systém automaticky přidává oddělovače: mezery, pomlčky, závorky, lomítka. To je klíčový rozdíl oproti následnému zpracování, kde jsou data formátována po dokončení vstupu.

Vstupní masky řeší tři problémy uživatelského zážitku. První — kognitivní zátěž: uživatel si nemusí pamatovat formát dat a ručně umísťovat oddělovače. Druhý — rychlost zadávání: automatické přidávání oddělovačů a přechod k další skupině znaků zrychluje psaní. Třetí — kvalita dat: maska zaručuje, že data budou shromážděna v jednotném formátu bez odchylek.

Na rozdíl od formátovačů NSFormatter, které pracují na úrovni zobrazení již zadaných dat, Input Mask pracuje na úrovni vstupu: kontroluje každý zadávaný znak a určuje, zda je povolen na aktuální pozici masky. Pokud znak neodpovídá masce, je odmítnut nebo ignorován.

Podle UX výzkumu Apple (2024) jsou vstupní masky nejúčinnější pro pole, kde uživatel zadává data v neznámém formátu. Například SNILS (000-000-000 00) nebo INN (000000000000) — uživatel nemusí znát přesný počet číslic nebo umístění oddělovačů a maska vizuálně ukazuje správný formát.

Syntaxe vstupní masky

Syntaxe masky v knihovně InputMask používá kombinaci zástupných znaků a konstantních znaků. Zástupné znaky určují typ povoleného znaku na každé pozici: 0 nebo 9 pro číslice, A pro písmena, _ pro libovolný znak. Konstantní znaky jsou oddělovače, které se přidávají automaticky: mezery, pomlčky, závorky, tečky, lomítka.

Povinné a volitelné bloky

Hranaté závorky [0] označují povinný znak — uživatel musí na této pozici zadat číslici. Složené závorky {0} označují volitelný znak — pokud uživatel blok přeskočí, maska nevkládá odpovídající oddělovače. Například maska [00]{.}[00]{.}[0000] pro datum: pokud uživatel nezadá měsíc, oddělovač za dnem se také nezobrazí.

Afix masky

Konstantní znaky mimo hranaté a složené závorky tvoří afix — zobrazují se vždy, i když je pole prázdné. Například v masce +7 ([000]) [000]-[00]-[00] jsou znaky +7, (, ), mezera a pomlčka afixem a uživatel je nemůže odstranit. Afix pomáhá uživateli pochopit očekávaný formát ještě před zahájením zadávání.

Typy masek podle účelu

Vstupní masky jsou klasifikovány podle typu dat, pro která jsou určeny. Každý typ má svou strukturu, počet skupin a umístění oddělovačů. Správný výběr masky je kritický pro uživatelský zážitek — pokud maska neodpovídá očekáváním uživatele, bude odstraňovat automaticky vložené znaky.

Masky pro telefonní čísla

Telefonní masky — nejrozšířenější typ. Ruské číslo se formátuje jako +7 ([000]) [000]-[00]-[00], americké jako +1 ([000]) [000]-[0000]. Maska musí podporovat různý počet číslic v předvolbě země a města. Knihovna InputMask podporuje prioritní masky: pokud první maska neodpovídá (uživatel zadal kód jiné země), použije se druhá.

Masky pro bankovní karty

Pro čísla karet se používá maska [0000] [0000] [0000] [0000] s mezerami mezi skupinami po 4 číslicích. Dále lze použít masku pro datum expirace [00]/[00] a CVV kód [000]. Maska pro číslo karty podporuje 16–19 číslic v závislosti na platebním systému: Visa a Mastercard — 16 číslic, American Express — 15, Maestro — 12–19.

Masky pro data a kódy

Masky dat používají formát [00]{.}[00]{.}[0000] s oddělovačem ve formě tečky nebo lomítka. Pro INN, SNILS a další identifikátory se používají specializované masky: INN — [000000000000] (12 číslic), SNILS — [000]-[000]-[000] [00] (11 číslic s pomlčkami). Pro ověřovací kódy — [0000] nebo [000000] v závislosti na délce.

Implementace masky ve Swift

Implementace masky ve Swift se provádí nastavením delegáta UITextFieldDelegate pomocí knihovny InputMask. Knihovna poskytuje třídu MaskedTextFieldDelegate, která se připojí k textovému poli a automaticky formátuje vstup podle zadané masky.

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

Pro telefonní čísla s automatickým rozpoznáním země použijte prioritní masky. MaskedTextFieldDelegate podporuje pole masek: první odpovídající se použije. Pokud uživatel zadá kód +1, použije se americký formát, pokud +7 — ruský.

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

Pro datum s volitelnými bloky použijte složené závorky. Pokud uživatel zadá pouze den, maska se zobrazí jako „21". Pokud zadá den a měsíc — „21.07". Pokud všechny tři složky — „21.07.2026". Volitelné bloky činí masku adaptivní a nenutí uživatele zadávat data, která nechce poskytnout.

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

Zpracování vkládání a mazání

Správné zpracování vkládání — jeden z nejsložitějších aspektů implementace vstupní masky. Při vkládání textu (například čísla karty ze schránky) musí knihovna odstranit všechny oddělovače z vkládaného textu, extrahovat pouze významné znaky a aplikovat masku na čistá data. InputMask od RedMadRobot to dělá automaticky prostřednictvím metody shouldChangeCharactersIn.

Při vkládání formátovaného textu (s mezerami nebo pomlčkami) knihovna nejprve normalizuje data: odstraní všechny znaky, které neodpovídají vzoru masky, poté aplikuje masku na normalizovaný řetězec. Pokud vkládaný text obsahuje nepovolené znaky (písmena v číselné masce), jsou ignorovány.

Zpracování mazání (backspace) v masce vyžaduje zvláštní pozornost. Při stisknutí backspace musí maska odstranit poslední významný znak, nikoli konstantní oddělovač. Pokud je kurzor za konstantním znakem, backspace by jej měl přeskočit a odstranit předchozí významný znak. InputMask implementuje toto chování pomocí zásobníku zadaných znaků.

Pro výběr a nahrazení textu musí maska správně zpracovávat situace, kdy uživatel vybere část textu a nahradí ji novým. Knihovna InputMask to podporuje prostřednictvím metody modifyString v MaskedTextFieldDelegate, která přijímá rozsah nahrazení a nový řetězec.

Doporučení pro navrhování masek

Navrhování masky začíná analýzou toho, jak bude uživatel zadávat data. Pokud většina uživatelů zná formát zpaměti (telefonní číslo), maska by měla být minimální — pouze oddělovače mezi skupinami. Pokud je formát neznámý (SNILS, INN), maska by měla být informativnější, s afixem a popisky.

Vyhněte se nadbytečným maskám s velkým počtem konstantních znaků. Maska +7 ([000]) [000]-[00]-[00] obsahuje 7 konstantních znaků na 10 významných — to je přijatelné. Ale maska s nadbytečnými oddělovači, kterou uživatel neustále obchází, přináší více škody než užitku. Pokud si nejste jisti formátem — použijte volný vstup.

Pro mezinárodní aplikace zohledněte, že formát dat se může v různých zemích lišit. Telefonní číslo v USA má formát +1 (XXX) XXX-XXXX, v Itálii — +39 XXX XXX XXXX. Používejte prioritní masky s automatickým rozpoznáním země podle kódu nebo poskytněte uživateli výběr země před zadáním čísla.

Podle UX testování InputMask uživatelé preferují masky, které ukazují formát před zahájením zadávání (prostřednictvím placeholderu nebo afixu) a neblokují zadávání znaků. Maska by měla být nápovědou, nikoli omezením. Pokud uživatel zadá znak, který neodpovídá masce, je lepší mu to umožnit než blokovat zadávání bez vysvětlení důvodu.