Input Mask: wat is het, invoermaskers en opmaak

Wat is Input Mask?

Input Mask (invoermasker) is een mechanisme dat het patroon van ingevoerde gegevens bepaalt en de tekst automatisch opmaakt tijdens het typen. De gebruiker voert alleen betekenisvolle tekens in (cijfers, letters) en het systeem voegt automatisch scheidingstekens toe: spaties, koppeltekens, haakjes, schuine strepen. Dit is het belangrijkste verschil met nabewerking, waarbij gegevens worden opgemaakt na voltooiing van de invoer.

Invoermaskers lossen drie problemen van de gebruikerservaring op. Ten eerste — cognitieve belasting: de gebruiker hoeft het gegevensformaat niet te onthouden en handmatig scheidingstekens te plaatsen. Ten tweede — invoersnelheid: het automatisch toevoegen van scheidingstekens en doorgaan naar de volgende tekengroep versnelt het typen. Ten derde — gegevenskwaliteit: het masker garandeert dat gegevens in een uniform formaat zonder variaties worden verzameld.

In tegenstelling tot formatters NSFormatter, die werken op het niveau van weergave van reeds ingevoerde gegevens, werkt Input Mask op het niveau van invoer: het controleert elk ingevoerd teken en bepaalt of dit is toegestaan op de huidige positie van het masker. Als het teken niet overeenkomt met het masker, wordt het afgewezen of genegeerd.

Volgens Apple UX-onderzoek (2024) zijn invoermaskers het meest effectief voor velden waarin de gebruiker gegevens invoert in een onbekend formaat. Bijvoorbeeld SNILS (000-000-000 00) of INN (000000000000) — de gebruiker weet mogelijk niet het exacte aantal cijfers of de plaatsing van scheidingstekens, en het masker toont visueel het juiste formaat.

Syntax van invoermasker

Maskersyntax in de InputMask-bibliotheek gebruikt een combinatie van plaatsvervangende tekens en constante tekens. Plaatsvervangers bepalen het type toegestaan teken op elke positie: 0 of 9 voor cijfers, A voor letters, _ voor elk teken. Constante tekens zijn scheidingstekens die automatisch worden ingevoegd: spaties, koppeltekens, haakjes, punten, schuine strepen.

Verplichte en optionele blokken

Vierkante haken [0] geven een verplicht teken aan — de gebruiker moet een cijfer op deze positie invoeren. Accolades {0} geven een optioneel teken aan — als de gebruiker het blok overslaat, voegt het masker de bijbehorende scheidingstekens niet in. Bijvoorbeeld het masker [00]{.}[00]{.}[0000] voor datum: als de gebruiker geen maand invoert, wordt het scheidingsteken na de dag ook niet weergegeven.

Affix van het masker

Constante tekens buiten de vierkante haken en accolades vormen de affix — ze worden altijd weergegeven, zelfs als het veld leeg is. In het masker +7 ([000]) [000]-[00]-[00] zijn de tekens +7, (, ), spatie en koppelteken affix en kunnen niet door de gebruiker worden verwijderd. De affix helpt de gebruiker het verwachte formaat te begrijpen nog voordat hij begint met invoeren.

Soorten maskers per doel

Invoermaskers worden geclassificeerd op basis van het type gegevens waarvoor ze bedoeld zijn. Elk type heeft zijn eigen structuur, aantal groepen en plaatsing van scheidingstekens. De juiste keuze van het masker is cruciaal voor de gebruikerservaring — als het masker niet voldoet aan de verwachtingen van de gebruiker, zal hij de automatisch ingevoegde tekens verwijderen.

Maskers voor telefoonnummers

Telefoonmaskers — het meest voorkomende type. Het Russische nummer wordt opgemaakt als +7 ([000]) [000]-[00]-[00], het Amerikaanse als +1 ([000]) [000]-[0000]. Het masker moet een verschillend aantal cijfers in de land- en stadscode ondersteunen. De InputMask-bibliotheek ondersteunt prioriteitsmaskers: als het eerste masker niet past (de gebruiker heeft een andere landcode ingevoerd), wordt het tweede toegepast.

Maskers voor bankkaarten

Voor kaartnummers wordt het masker [0000] [0000] [0000] [0000] gebruikt met spaties tussen groepen van 4 cijfers. Aanvullend kan een masker voor de vervaldatum [00]/[00] en CVV-code [000] worden toegepast. Het masker voor kaartnummers ondersteunt 16–19 cijfers, afhankelijk van het betalingssysteem: Visa en Mastercard — 16 cijfers, American Express — 15, Maestro — 12–19.

Maskers voor datums en codes

Datumsmaskers gebruiken het formaat [00]{.}[00]{.}[0000] met een punt of schuine streep als scheidingsteken. Voor INN, SNILS en andere identificatoren worden gespecialiseerde maskers gebruikt: INN — [000000000000] (12 cijfers), SNILS — [000]-[000]-[000] [00] (11 cijfers met koppeltekens). Voor verificatiecodes — [0000] of [000000] afhankelijk van de lengte.

Masker implementeren in Swift

Implementatie van het masker in Swift gebeurt door het instellen van de UITextFieldDelegate-delegate met behulp van de InputMask-bibliotheek. De bibliotheek biedt de klasse MaskedTextFieldDelegate, die wordt gekoppeld aan het tekstveld en de invoer automatisch opmaakt volgens het opgegeven masker.

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

Gebruik voor telefoonnummers met automatische landdetectie prioriteitsmaskers. MaskedTextFieldDelegate ondersteunt een reeks maskers: het eerste overeenkomende masker wordt toegepast. Als de gebruiker code +1 invoert, wordt het Amerikaanse formaat toegepast, bij +7 — het Russische formaat.

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

Gebruik voor datum met optionele blokken accolades. Als de gebruiker alleen de dag invoert, wordt het masker weergegeven als „21". Als hij dag en maand invoert — „21.07". Als alle drie componenten — „21.07.2026". Optionele blokken maken het masker adaptief en dwingen de gebruiker niet om gegevens in te voeren die hij niet wil verstrekken.

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

Plakken en verwijderen afhandelen

Correct plakken afhandelen — een van de moeilijkste aspecten van het implementeren van een invoermasker. Bij het plakken van tekst (bijvoorbeeld een kaartnummer uit het klembord) moet de bibliotheek alle scheidingstekens uit de geplakte tekst verwijderen, alleen betekenisvolle tekens extraheren en het masker toepassen op de schone gegevens. InputMask van RedMadRobot doet dit automatisch via de methode shouldChangeCharactersIn.

Bij het plakken van opgemaakte tekst (met spaties of koppeltekens) normaliseert de bibliotheek eerst de gegevens: het verwijdert alle tekens die niet overeenkomen met het maskerpatroon, past vervolgens het masker toe op de genormaliseerde string. Als de geplakte tekst ontoegestane tekens bevat (letters in een numeriek masker), worden deze genegeerd.

Het afhandelen van verwijderen (backspace) in het masker vereist speciale aandacht. Bij het indrukken van backspace moet het masker het laatste betekenisvolle teken verwijderen, niet het constante scheidingsteken. Als de cursor na een constant teken staat, moet backspace dit overslaan en het vorige betekenisvolle teken verwijderen. InputMask implementeert dit gedrag via een stack van ingevoerde tekens.

Voor selecteren en vervangen van tekst moet het masker correct omgaan met situaties waarin de gebruiker een deel van de tekst selecteert en vervangt door nieuwe tekst. De InputMask-bibliotheek ondersteunt dit via de methode modifyString in MaskedTextFieldDelegate, die het vervangingsbereik en de nieuwe string ontvangt.

Aanbevelingen voor het ontwerpen van maskers

Het ontwerpen van een masker begint met een analyse van hoe de gebruiker gegevens zal invoeren. Als de meeste gebruikers het formaat uit het hoofd kennen (telefoonnummer), moet het masker minimaal zijn — alleen scheidingstekens tussen groepen. Als het formaat onbekend is (SNILS, INN), moet het masker informatiever zijn, met affix en labels.

Vermijd overbodige maskers met een groot aantal constante tekens. Het masker +7 ([000]) [000]-[00]-[00] bevat 7 constante tekens op 10 betekenisvolle — dit is acceptabel. Maar een masker met overbodige scheidingstekens dat de gebruiker constant omzeilt, brengt meer kwaad dan goed. Als u twijfelt over het formaat — gebruik vrije invoer.

Houd voor internationale toepassingen rekening met het feit dat het gegevensformaat per land kan verschillen. Het telefoonnummer in de VS heeft het formaat +1 (XXX) XXX-XXXX, en in Italië — +39 XXX XXX XXXX. Gebruik prioriteitsmaskers met automatische landdetectie op basis van de code of geef de gebruiker de mogelijkheid om een land te kiezen voordat hij het nummer invoert.

Volgens UX-testen van InputMask geven gebruikers de voorkeur aan maskers die het formaat tonen voordat ze beginnen met invoeren (via placeholder of affix) en het invoeren van tekens niet blokkeren. Het masker moet een hint zijn, geen beperking. Als de gebruiker een teken invoert dat niet overeenkomt met het masker, is het beter hem dit toe te staan dan de invoer te blokkeren zonder uitleg van de reden.