Input Mask: cos'è, maschere di input e formattazione

Cos'è una maschera di input?

Input Mask (maschera di input) è un meccanismo che definisce un modello per i dati inseriti e formatta automaticamente il testo man mano che viene digitato. L'utente inserisce solo caratteri significativi (cifre, lettere) e il sistema aggiunge automaticamente separatori: spazi, trattini, parentesi, barre. Questa è la differenza principale rispetto alla post-elaborazione, dove i dati vengono formattati dopo il completamento dell'inserimento.

Le maschere di input risolvono tre problemi dell'esperienza utente. Primo — carico cognitivo: l'utente non deve ricordare il formato dei dati e inserire manualmente i separatori. Secondo — velocità di input: l'inserimento automatico dei separatori e il passaggio al gruppo di caratteri successivo accelerano la digitazione. Terzo — qualità dei dati: la maschera garantisce che i dati vengano raccolti in un formato uniforme senza variazioni.

A differenza dei formattatori NSFormatter, che operano a livello di visualizzazione dei dati già inseriti, una maschera di input opera a livello di input: controlla ogni carattere inserito e determina se è consentito nella posizione corrente della maschera. Se un carattere non corrisponde alla maschera, viene rifiutato o ignorato.

Secondo la ricerca UX di Apple (2024), le maschere di input sono più efficaci per i campi in cui l'utente inserisce dati in un formato sconosciuto. Ad esempio, SNILS (000-000-000 00) o INN (000000000000) — l'utente potrebbe non conoscere il numero esatto di cifre o la posizione dei separatori, e la maschera suggerisce visivamente il formato corretto.

Sintassi della maschera di input

La sintassi della maschera nella libreria InputMask utilizza una combinazione di caratteri segnaposto e caratteri costanti. I segnaposto definiscono il tipo di carattere consentito in ogni posizione: 0 o 9 per le cifre, A per le lettere, _ per qualsiasi carattere. I caratteri costanti sono separatori inseriti automaticamente: spazi, trattini, parentesi, punti, barre.

Blocchi obbligatori e opzionali

Le parentesi quadre [0] indicano un carattere obbligatorio — l'utente deve inserire una cifra in questa posizione. Le parentesi graffe {0} indicano un carattere opzionale — se l'utente salta il blocco, la maschera non inserisce i separatori corrispondenti. Ad esempio, la maschera [00]{.}[00]{.}[0000] per una data: se l'utente non inserisce il mese, il separatore dopo il giorno non viene visualizzato.

Affisso della maschera

I caratteri costanti al di fuori di parentesi quadre e graffe sono l'affisso — vengono sempre visualizzati, anche se il campo è vuoto. Ad esempio, nella maschera +7 ([000]) [000]-[00]-[00], i caratteri +7, (, ), spazio e trattino sono l'affisso e non possono essere eliminati dall'utente. L'affisso aiuta l'utente a comprendere il formato previsto ancor prima di iniziare l'inserimento.

Tipi di maschere per scopo

Le maschere di input sono classificate in base al tipo di dati per cui sono progettate. Ogni tipo ha la propria struttura, numero di gruppi e posizionamento dei separatori. La scelta corretta della maschera è fondamentale per l'esperienza utente — se la maschera non corrisponde alle aspettative dell'utente, questi eliminerà i caratteri inseriti automaticamente.

Maschere per numeri di telefono

Le maschere telefoniche sono il tipo più comune. Un numero russo viene formattato come +7 ([000]) [000]-[00]-[00], un numero americano come +1 ([000]) [000]-[0000]. La maschera deve supportare diversi numeri di cifre nel prefisso del paese e della città. La libreria InputMask supporta maschere di priorità: se la prima maschera non è adatta (l'utente ha inserito un prefisso di paese diverso), viene applicata la seconda.

Maschere per carte bancarie

Per i numeri di carta viene utilizzata la maschera [0000] [0000] [0000] [0000] con spazi tra i gruppi di 4 cifre. Inoltre, può essere applicata una maschera per la data di scadenza [00]/[00] e il codice CVV [000]. La maschera per il numero di carta supporta 16–19 cifre a seconda del sistema di pagamento: Visa e Mastercard — 16 cifre, American Express — 15, Maestro — 12–19.

Maschere per date e codici

Le maschere per date utilizzano il formato [00]{.}[00]{.}[0000] con punto o barra come separatore. Per INN, SNILS e altri identificatori vengono utilizzate maschere specializzate: INN — [000000000000] (12 cifre), SNILS — [000]-[000]-[000] [00] (11 cifre con trattini). Per i codici di verifica — [0000] o [000000] a seconda della lunghezza.

Implementazione di una maschera in Swift

L'implementazione di una maschera in Swift avviene impostando un delegato UITextFieldDelegate utilizzando la libreria InputMask. La libreria fornisce la classe MaskedTextFieldDelegate, che si collega a un campo di testo e formatta automaticamente l'input secondo la maschera specificata.

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

Per i numeri di telefono con rilevamento automatico del paese, utilizza maschere di priorità. MaskedTextFieldDelegate supporta un array di maschere: viene applicata la prima maschera corrispondente. Se l'utente inserisce il prefisso +1, viene applicato il formato americano; se +7, il formato russo.

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

Per le date con blocchi opzionali, utilizza le parentesi graffe. Se l'utente inserisce solo il giorno, la maschera mostra “21”. Se inserisce giorno e mese — “21.07”. Se inserisce tutti e tre i componenti — “21.07.2026”. I blocchi opzionali rendono la maschera adattiva e non costringono l'utente a inserire dati che non desidera fornire.

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

Gestione di incolla ed eliminazione

La gestione corretta dell'incolla è uno degli aspetti più complessi dell'implementazione di una maschera di input. Quando si incolla del testo (ad esempio, un numero di carta dagli appunti), la libreria deve rimuovere tutti i separatori dal testo incollato, estrarre solo i caratteri significativi e applicare la maschera ai dati puliti. InputMask di RedMadRobot lo fa automaticamente attraverso il metodo shouldChangeCharactersIn.

Quando si incolla testo formattato (con spazi o trattini), la libreria prima normalizza i dati: rimuove tutti i caratteri che non corrispondono al modello della maschera, quindi applica la maschera alla stringa normalizzata. Se il testo incollato contiene caratteri non validi (lettere in una maschera di cifre), vengono ignorati.

La gestione dell'eliminazione (backspace) in una maschera richiede attenzione particolare. Quando si preme backspace, la maschera deve eliminare l'ultimo carattere significativo, non il separatore costante. Se il cursore si trova dopo un carattere costante, il backspace deve saltarlo ed eliminare il carattere significativo precedente. InputMask implementa questo comportamento attraverso uno stack di caratteri inseriti.

Per la selezione e sostituzione del testo, la maschera deve gestire correttamente le situazioni in cui l'utente seleziona parte del testo e lo sostituisce con nuovo contenuto. La libreria InputMask supporta questo tramite il metodo modifyString in MaskedTextFieldDelegate, che accetta un intervallo di sostituzione e una nuova stringa.

Buone pratiche per progettare maschere

La progettazione della maschera inizia analizzando come l'utente inserirà i dati. Se la maggior parte degli utenti conosce il formato a memoria (numero di telefono), la maschera dovrebbe essere minima — solo separatori tra i gruppi. Se il formato è sconosciuto (SNILS, INN), la maschera dovrebbe essere più informativa, con un affisso ed etichette.

Evita maschere eccessive con un gran numero di caratteri costanti. La maschera +7 ([000]) [000]-[00]-[00] contiene 7 caratteri costanti per 10 significativi — questo è accettabile. Ma una maschera con separatori eccessivi che l'utente aggira costantemente fa più male che bene. Se non sei sicuro del formato — utilizza l'input libero.

Per le applicazioni internazionali, considera che i formati dei dati possono differire tra paesi. Un numero di telefono negli Stati Uniti ha il formato +1 (XXX) XXX-XXXX, mentre in Italia — +39 XXX XXX XXXX. Utilizza maschere di priorità con rilevamento automatico del paese tramite prefisso, o lascia che l'utente scelga un paese prima di inserire il numero.

Secondo i test UX di InputMask, gli utenti preferiscono maschere che mostrano il formato prima dell'inizio dell'inserimento (tramite segnaposto o affisso) e che non bloccano l'inserimento dei caratteri. Una maschera dovrebbe essere un suggerimento, non una restrizione. Se l'utente inserisce un carattere che non corrisponde alla maschera, è meglio permetterlo piuttosto che bloccare l'inserimento senza spiegazione.