Input Mask: vad \u00E4r det, inmatningsmasker och formatering

Vad är Input Mask?

Input Mask (inmatningsmask) är en mekanism som bestämmer mönstret för inmatade data och automatiskt formaterar texten medan den skrivs. Användaren anger endast betydelsefulla tecken (siffror, bokstäver) och systemet lägger automatiskt till avgränsare: mellanslag, bindestreck, parenteser, snedstreck. Detta är den viktigaste skillnaden från efterbehandling, där data formateras efter att inmatningen är klar.

Inmatningsmasker löser tre problem med användarupplevelsen. Första — kognitiv belastning: användaren behöver inte komma ihåg dataformatet och manuellt placera avgränsare. Andra — inmatningshastighet: automatisk tilläggning av avgränsare och övergång till nästa teckengrupp påskyndar skrivandet. Tredje — datakvalitet: masken garanterar att data samlas in i ett enhetligt format utan variationer.

Till skillnad från formaterare NSFormatter, som arbetar på nivån för visning av redan inmatade data, arbetar Input Mask på inmatningsnivån: den kontrollerar varje inmatat tecken och avgör om det är tillåtet på maskens aktuella position. Om tecknet inte matchar masken avvisas eller ignoreras det.

Enligt Apple UX-forskning (2024) är inmatningsmasker mest effektiva för fält där användaren anger data i ett okänt format. Till exempel SNILS (000-000-000 00) eller INN (000000000000) — användaren kanske inte vet det exakta antalet siffror eller placeringen av avgränsare, och masken visar visuellt rätt format.

Syntax för inmatningsmask

Maskens syntax i InputMask-biblioteket använder en kombination av platshållartecken och konstanta tecken. Platshållare bestämmer typen av tillåtet tecken på varje position: 0 eller 9 för siffror, A för bokstäver, _ för valfritt tecken. Konstanta tecken är avgränsare som läggs till automatiskt: mellanslag, bindestreck, parenteser, punkter, snedstreck.

Obligatoriska och valfria block

Hakparenteser [0] indikerar ett obligatoriskt tecken — användaren måste ange en siffra på denna position. Klammerparenteser {0} indikerar ett valfritt tecken — om användaren hoppar över blocket infogar masken inte motsvarande avgränsare. Till exempel masken [00]{.}[00]{.}[0000] för datum: om användaren inte anger månaden visas inte avgränsaren efter dagen.

Maskens affix

Konstanta tecken utanför hak- och klammerparenteser utgör affixet — de visas alltid, även om fältet är tomt. I masken +7 ([000]) [000]-[00]-[00] är tecknen +7, (, ), mellanslag och bindestreck affix och kan inte tas bort av användaren. Affixet hjälper användaren att förstå det förväntade formatet innan inmatningen påbörjas.

Typer av masker efter användning

Inmatningsmasker klassificeras efter typen av data de är avsedda för. Varje typ har sin egen struktur, antal grupper och placering av avgränsare. Korrekt val av mask är avgörande för användarupplevelsen — om masken inte motsvarar användarens förväntningar kommer han att ta bort de automatiskt infogade tecknen.

Masker för telefonnummer

Telefonmasker — den vanligaste typen. Det ryska numret formateras som +7 ([000]) [000]-[00]-[00], det amerikanska som +1 ([000]) [000]-[0000]. Masken måste stödja olika antal siffror i landskod och stadskod. InputMask-biblioteket stöder prioritetsmasker: om den första masken inte passar (användaren har angett en annan landskod) tillämpas den andra.

Masker för bankkort

För kortnummer används masken [0000] [0000] [0000] [0000] med mellanslag mellan grupper om 4 siffror. Dessutom kan mask för utgångsdatum [00]/[00] och CVV-kod [000] tillämpas. Masken för kortnummer stöder 16–19 siffror beroende på betalningssystem: Visa och Mastercard — 16 siffror, American Express — 15, Maestro — 12–19.

Masker för datum och koder

Datummasker använder formatet [00]{.}[00]{.}[0000] med punkt eller snedstreck som avgränsare. För INN, SNILS och andra identifierare används specialiserade masker: INN — [000000000000] (12 siffror), SNILS — [000]-[000]-[000] [00] (11 siffror med bindestreck). För verifieringskoder — [0000] eller [000000] beroende på längd.

Implementering av mask i Swift

Implementering av mask i Swift görs genom att ställa in UITextFieldDelegate-delegaten med InputMask-biblioteket. Biblioteket tillhandahåller klassen MaskedTextFieldDelegate som ansluter till textfältet och automatiskt formaterar inmatningen enligt den angivna masken.

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

För telefonnummer med automatisk landsdetektering, använd prioritetsmasker. MaskedTextFieldDelegate stöder en array av masker: den första matchande tillämpas. Om användaren anger kod +1 tillämpas amerikanskt format, om +7 — ryskt format.

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

För datum med valfria block använd klammerparenteser. Om användaren endast anger dagen visas masken som „21". Om han anger dag och månad — „21.07". Om alla tre komponenter — „21.07.2026". Valfria block gör masken adaptiv och tvingar inte användaren att ange data som han inte vill lämna ut.

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

Hantering av inklistring och borttagning

Korrekt hantering av inklistring — en av de svåraste aspekterna av att implementera en inmatningsmask. Vid inklistring av text (till exempel kortnummer från urklipp) måste biblioteket ta bort alla avgränsare från den inklistrade texten, extrahera endast betydelsefulla tecken och tillämpa masken på rena data. InputMask från RedMadRobot gör detta automatiskt via metoden shouldChangeCharactersIn.

Vid inklistring av formaterad text (med mellanslag eller bindestreck) normaliserar biblioteket först data: tar bort alla tecken som inte matchar maskmönstret, tillämpar sedan masken på den normaliserade strängen. Om den inklistrade texten innehåller otillåtna tecken (bokstäver i numerisk mask) ignoreras de.

Hantering av borttagning (backspace) i masken kräver särskild uppmärksamhet. Vid tryck på backspace måste masken ta bort det sista betydelsefulla tecknet, inte den konstanta avgränsaren. Om markören står efter ett konstant tecken bör backspace hoppa över det och ta bort det föregående betydelsefulla tecknet. InputMask implementerar detta beteende genom en stack av inmatade tecken.

För markering och ersättning av text måste masken korrekt hantera situationer där användaren markerar en del av texten och ersätter den med ny text. InputMask-biblioteket stöder detta via metoden modifyString i MaskedTextFieldDelegate som tar emot ersättningsintervallet och den nya strängen.

Rekommendationer för utformning av masker

Utformning av mask börjar med en analys av hur användaren kommer att ange data. Om de flesta användare kan formatet utantill (telefonnummer) bör masken vara minimal — endast avgränsare mellan grupper. Om formatet är okänt (SNILS, INN) bör masken vara mer informativ, med affix och etiketter.

Undvik överflödiga masker med ett stort antal konstanta tecken. Masken +7 ([000]) [000]-[00]-[00] innehåller 7 konstanta tecken på 10 betydelsefulla — detta är acceptabelt. Men en mask med överflödiga avgränsare som användaren ständigt kringgår gör mer skada än nytta. Om du är osäker på formatet — använd fri inmatning.

För internationella applikationer ta hänsyn till att dataformatet kan skilja sig mellan länder. Telefonnumret i USA har formatet +1 (XXX) XXX-XXXX och i Italien — +39 XXX XXX XXXX. Använd prioritetsmasker med automatisk landsdetektering enligt kod eller ge användaren möjlighet att välja land innan numret anges.

Enligt UX-testning av InputMask föredrar användare masker som visar formatet innan inmatningen påbörjas (via platshållare eller affix) och inte blockerar inmatning av tecken. Masken bör vara en vägledning, inte en begränsning. Om användaren anger ett tecken som inte matchar masken är det bättre att tillåta det än att blockera inmatningen utan att förklara orsaken.