Input Mask : ce que c'est, masques de saisie et formatage

Qu'est-ce qu'un masque de saisie ?

Input Mask (masque de saisie) est un mécanisme qui définit un modèle pour les données saisies et formate automatiquement le texte au fur et à mesure de la saisie. L'utilisateur saisit uniquement des caractères significatifs (chiffres, lettres), et le système ajoute automatiquement des séparateurs : espaces, tirets, parenthèses, barres obliques. C'est la principale différence avec le post-traitement, où les données sont formatées après la fin de la saisie.

Les masques de saisie résolvent trois problèmes de l'expérience utilisateur. Premièrement — la charge cognitive : l'utilisateur n'a pas besoin de mémoriser le format des données ni de placer manuellement les séparateurs. Deuxièmement — la vitesse de saisie : l'insertion automatique des séparateurs et le passage au groupe de caractères suivant accélèrent la frappe. Troisièmement — la qualité des données : le masque garantit que les données sont collectées dans un format uniforme sans variations.

Contrairement aux formatteurs NSFormatter, qui fonctionnent au niveau d'affichage des données déjà saisies, un masque de saisie fonctionne au niveau de la saisie : il contrôle chaque caractère saisi et détermine s'il est autorisé à la position actuelle du masque. Si un caractère ne correspond pas au masque, il est rejeté ou ignoré.

Selon les recherches UX d'Apple (2024), les masques de saisie sont les plus efficaces pour les champs où l'utilisateur saisit des données dans un format inconnu. Par exemple, SNILS (000-000-000 00) ou INN (000000000000) — l'utilisateur peut ne pas connaître le nombre exact de chiffres ou l'emplacement des séparateurs, et le masque suggère visuellement le format correct.

Syntaxe du masque de saisie

La syntaxe du masque dans la bibliothèque InputMask utilise une combinaison de caractères d'espace réservé et de caractères constants. Les espaces réservés définissent le type de caractère autorisé à chaque position : 0 ou 9 pour les chiffres, A pour les lettres, _ pour tout caractère. Les caractères constants sont des séparateurs insérés automatiquement : espaces, tirets, parenthèses, points, barres obliques.

Blocs obligatoires et facultatifs

Les crochets [0] indiquent un caractère obligatoire — l'utilisateur doit saisir un chiffre à cette position. Les accolades {0} indiquent un caractère facultatif — si l'utilisateur ignore le bloc, le masque n'insère pas les séparateurs correspondants. Par exemple, le masque [00]{.}[00]{.}[0000] pour une date : si l'utilisateur ne saisit pas le mois, le séparateur après le jour ne s'affiche pas non plus.

Affixe du masque

Les caractères constants en dehors des crochets et accolades sont l'affixe — ils sont toujours affichés, même si le champ est vide. Par exemple, dans le masque +7 ([000]) [000]-[00]-[00], les caractères +7, (, ), l'espace et le tiret sont l'affixe et ne peuvent pas être supprimés par l'utilisateur. L'affixe aide l'utilisateur à comprendre le format attendu avant même de commencer la saisie.

Types de masques par objectif

Les masques de saisie sont classés par le type de données pour lesquelles ils sont conçus. Chaque type a sa propre structure, son nombre de groupes et son placement des séparateurs. Le choix correct du masque est critique pour l'expérience utilisateur — si le masque ne correspond pas aux attentes de l'utilisateur, il supprimera les caractères insérés automatiquement.

Masques pour numéros de téléphone

Les masques téléphoniques sont le type le plus courant. Un numéro russe est formaté comme +7 ([000]) [000]-[00]-[00], un numéro américain comme +1 ([000]) [000]-[0000]. Le masque doit prendre en charge différents nombres de chiffres dans l'indicatif du pays et de la ville. La bibliothèque InputMask prend en charge les masques de priorité : si le premier masque ne convient pas (l'utilisateur a saisi un indicatif de pays différent), le second est appliqué.

Masques pour cartes bancaires

Pour les numéros de carte, le masque [0000] [0000] [0000] [0000] est utilisé avec des espaces entre les groupes de 4 chiffres. De plus, un masque pour la date d'expiration [00]/[00] et le code CVV [000] peut être appliqué. Le masque de numéro de carte prend en charge 16 à 19 chiffres selon le système de paiement : Visa et Mastercard — 16 chiffres, American Express — 15, Maestro — 12 à 19.

Masques pour dates et codes

Les masques de date utilisent le format [00]{.}[00]{.}[0000] avec un point ou une barre oblique comme séparateur. Pour INN, SNILS et autres identifiants, des masques spécialisés sont utilisés : INN — [000000000000] (12 chiffres), SNILS — [000]-[000]-[000] [00] (11 chiffres avec tirets). Pour les codes de vérification — [0000] ou [000000] selon la longueur.

Implémentation d'un masque en Swift

L'implémentation d'un masque en Swift se fait en définissant un délégué UITextFieldDelegate avec la bibliothèque InputMask. La bibliothèque fournit la classe MaskedTextFieldDelegate, qui se connecte à un champ de texte et formate automatiquement la saisie selon le masque spécifié.

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

Pour les numéros de téléphone avec détection automatique du pays, utilisez des masques de priorité. MaskedTextFieldDelegate prend en charge un tableau de masques : le premier masque correspondant est appliqué. Si l'utilisateur saisit le code +1, le format américain est appliqué ; si +7, le format russe.

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

Pour les dates avec blocs facultatifs, utilisez des accolades. Si l'utilisateur saisit uniquement le jour, le masque affiche « 21 ». S'il saisit le jour et le mois — « 21.07 ». S'il saisit les trois composants — « 21.07.2026 ». Les blocs facultatifs rendent le masque adaptatif et ne forcent pas l'utilisateur à saisir des données qu'il ne souhaite pas fournir.

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

Gestion du collage et de la suppression

La gestion correcte du collage est l'un des aspects les plus complexes de l'implémentation d'un masque de saisie. Lors du collage de texte (par exemple, un numéro de carte depuis le presse-papiers), la bibliothèque doit supprimer tous les séparateurs du texte collé, extraire uniquement les caractères significatifs et appliquer le masque aux données propres. InputMask de RedMadRobot le fait automatiquement via la méthode shouldChangeCharactersIn.

Lors du collage de texte formaté (avec espaces ou tirets), la bibliothèque normalise d'abord les données : elle supprime tous les caractères qui ne correspondent pas au motif du masque, puis applique le masque à la chaîne normalisée. Si le texte collé contient des caractères invalides (lettres dans un masque de chiffres), ils sont ignorés.

La gestion de la suppression (retour arrière) dans un masque nécessite une attention particulière. Lorsque la touche retour arrière est pressée, le masque doit supprimer le dernier caractère significatif, et non le séparateur constant. Si le curseur se trouve après un caractère constant, le retour arrière doit le sauter et supprimer le caractère significatif précédent. InputMask implémente ce comportement via une pile de caractères saisis.

Pour la sélection et le remplacement de texte, le masque doit gérer correctement les situations où l'utilisateur sélectionne une partie du texte et la remplace par un nouveau contenu. La bibliothèque InputMask prend en charge cela via la méthode modifyString dans MaskedTextFieldDelegate, qui accepte une plage de remplacement et une nouvelle chaîne.

Bonnes pratiques pour concevoir des masques

La conception d'un masque commence par l'analyse de la manière dont l'utilisateur saisira les données. Si la plupart des utilisateurs connaissent le format par cœur (numéro de téléphone), le masque doit être minimal — uniquement des séparateurs entre les groupes. Si le format est inconnu (SNILS, INN), le masque doit être plus informatif, avec un affixe et des étiquettes.

Évitez les masques excessifs avec un grand nombre de caractères constants. Le masque +7 ([000]) [000]-[00]-[00] contient 7 caractères constants pour 10 significatifs — c'est acceptable. Mais un masque avec des séparateurs excessifs que l'utilisateur contourne constamment fait plus de mal que de bien. Si vous n'êtes pas sûr du format — utilisez la saisie libre.

Pour les applications internationales, tenez compte du fait que les formats de données peuvent différer selon les pays. Un numéro de téléphone aux États-Unis a le format +1 (XXX) XXX-XXXX, tandis qu'en Italie — +39 XXX XXX XXXX. Utilisez des masques de priorité avec détection automatique du pays par indicatif, ou laissez l'utilisateur choisir un pays avant de saisir le numéro.

Selon les tests UX d'InputMask, les utilisateurs préfèrent les masques qui affichent le format avant le début de la saisie (via un espace réservé ou un affixe) et qui ne bloquent pas la saisie des caractères. Un masque doit être un indice, pas une restriction. Si l'utilisateur saisit un caractère qui ne correspond pas au masque, il est préférable de le permettre plutôt que de bloquer la saisie sans explication.