Input Mask: qué es, máscaras de entrada y formato

¿Qué es una máscara de entrada?

Input Mask (máscara de entrada) es un mecanismo que define una plantilla para los datos ingresados y formatea automáticamente el texto a medida que se escribe. El usuario ingresa solo caracteres significativos (dígitos, letras) y el sistema agrega automáticamente separadores: espacios, guiones, paréntesis, barras. Esta es una diferencia clave con el posprocesamiento, donde los datos se formatean después de completar la entrada.

Las máscaras de entrada resuelven tres problemas de la experiencia del usuario. Primero, la carga cognitiva: el usuario no necesita recordar el formato de los datos ni colocar manualmente los separadores. Segundo, la velocidad de entrada: la inserción automática de separadores y el avance al siguiente grupo de caracteres aceleran la escritura. Tercero, la calidad de los datos: la máscara garantiza que los datos se recopilen en un formato uniforme sin variaciones.

A diferencia de los formateadores NSFormatter, que funcionan a nivel de visualización de datos ya ingresados, una máscara de entrada funciona a nivel de ingreso: controla cada carácter que se ingresa y determina si está permitido en la posición actual de la máscara. Si un carácter no coincide con la máscara, se rechaza o ignora.

Según investigaciones de UX de Apple (2024), las máscaras de entrada son más efectivas para campos donde el usuario ingresa datos en un formato desconocido. Por ejemplo, SNILS (000-000-000 00) o INN (000000000000): el usuario puede no saber la cantidad exacta de dígitos o la ubicación de los separadores, y la máscara sugiere visualmente el formato correcto.

Sintaxis de la máscara de entrada

La sintaxis de la máscara en la biblioteca InputMask utiliza una combinación de caracteres de marcador de posición y caracteres constantes. Los marcadores de posición definen el tipo de carácter permitido en cada posición: 0 o 9 para dígitos, A para letras, _ para cualquier carácter. Los caracteres constantes son separadores que se insertan automáticamente: espacios, guiones, paréntesis, puntos, barras.

Bloques obligatorios y opcionales

Los corchetes [0] indican un carácter obligatorio: el usuario debe ingresar un dígito en esta posición. Las llaves {0} indican un carácter opcional: si el usuario omite el bloque, la máscara no inserta los separadores correspondientes. Por ejemplo, la máscara [00]{.}[00]{.}[0000] para una fecha: si el usuario no ingresa el mes, el separador después del día tampoco se muestra.

Afijo de la máscara

Los caracteres constantes fuera de corchetes y llaves son el afijo: siempre se muestran, incluso si el campo está vacío. Por ejemplo, en la máscara +7 ([000]) [000]-[00]-[00], los caracteres +7, (, ), espacio y guión son el afijo y no pueden ser eliminados por el usuario. El afijo ayuda al usuario a entender el formato esperado incluso antes de comenzar a ingresar datos.

Tipos de máscaras por propósito

Las máscaras de entrada se clasifican según el tipo de datos para el que están diseñadas. Cada tipo tiene su propia estructura, número de grupos y ubicación de separadores. La elección correcta de la máscara es crítica para la experiencia del usuario: si la máscara no coincide con las expectativas del usuario, este eliminará los caracteres insertados automáticamente.

Máscaras para números de teléfono

Las máscaras de teléfono son el tipo más común. Un número ruso se formatea como +7 ([000]) [000]-[00]-[00], un número estadounidense como +1 ([000]) [000]-[0000]. La máscara debe admitir diferentes cantidades de dígitos en el código de país y ciudad. La biblioteca InputMask admite máscaras prioritarias: si la primera máscara no es adecuada (el usuario ingresó un código de país diferente), se aplica la segunda.

Máscaras para tarjetas bancarias

Para números de tarjeta se usa la máscara [0000] [0000] [0000] [0000] con espacios entre grupos de 4 dígitos. Adicionalmente, se puede aplicar una máscara para la fecha de vencimiento [00]/[00] y el código CVV [000]. La máscara para número de tarjeta admite 16–19 dígitos según el sistema de pago: Visa y Mastercard — 16 dígitos, American Express — 15, Maestro — 12–19.

Máscaras para fechas y códigos

Las máscaras de fecha usan el formato [00]{.}[00]{.}[0000] con punto o barra como separador. Para INN, SNILS y otros identificadores se utilizan máscaras especializadas: INN — [000000000000] (12 dígitos), SNILS — [000]-[000]-[000] [00] (11 dígitos con guiones). Para códigos de verificación — [0000] o [000000] según la longitud.

Implementación de una máscara en Swift

La implementación de una máscara en Swift se realiza configurando un delegado UITextFieldDelegate con la biblioteca InputMask. La biblioteca proporciona la clase MaskedTextFieldDelegate, que se conecta a un campo de texto y formatea automáticamente la entrada según la máscara especificada.

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

Para números de teléfono con detección automática de país, usa máscaras prioritarias. MaskedTextFieldDelegate admite un array de máscaras: se aplica la primera que coincida. Si el usuario ingresa el código +1, se aplica el formato estadounidense; si ingresa +7, el formato ruso.

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

Para fechas con bloques opcionales, usa llaves. Si el usuario ingresa solo el día, la máscara muestra “21”. Si ingresa día y mes, muestra “21.07”. Si ingresa los tres componentes, muestra “21.07.2026”. Los bloques opcionales hacen que la máscara sea adaptable y no obligan al usuario a ingresar datos que no desea proporcionar.

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

Manejo de pegado y eliminación

El manejo correcto del pegado es uno de los aspectos más complejos de la implementación de una máscara de entrada. Al pegar texto (por ejemplo, un número de tarjeta desde el portapapeles), la biblioteca debe eliminar todos los separadores del texto pegado, extraer solo los caracteres significativos y aplicar la máscara a los datos limpios. InputMask de RedMadRobot lo hace automáticamente mediante el método shouldChangeCharactersIn.

Al pegar texto formateado (con espacios o guiones), la biblioteca primero normaliza los datos: elimina todos los caracteres que no coinciden con el patrón de la máscara, luego aplica la máscara a la cadena normalizada. Si el texto pegado contiene caracteres no válidos (letras en una máscara de dígitos), se ignoran.

El manejo de la eliminación (retroceso) en una máscara requiere atención especial. Al presionar retroceso, la máscara debe eliminar el último carácter significativo, no el separador constante. Si el cursor está después de un carácter constante, el retroceso debe omitirlo y eliminar el carácter significativo anterior. InputMask implementa este comportamiento mediante una pila de caracteres ingresados.

Para la selección y reemplazo de texto, la máscara debe manejar correctamente las situaciones en las que el usuario selecciona parte del texto y lo reemplaza por contenido nuevo. La biblioteca InputMask admite esto mediante el método modifyString en MaskedTextFieldDelegate, que acepta un rango de reemplazo y una nueva cadena.

Mejores prácticas para diseñar máscaras

El diseño de una máscara comienza analizando cómo el usuario ingresará los datos. Si la mayoría de los usuarios conocen el formato de memoria (número de teléfono), la máscara debe ser mínima — solo separadores entre grupos. Si el formato es desconocido (SNILS, INN), la máscara debe ser más informativa, con un afijo y etiquetas.

Evita máscaras excesivas con una gran cantidad de caracteres constantes. La máscara +7 ([000]) [000]-[00]-[00] contiene 7 caracteres constantes para 10 significativos — esto es aceptable. Pero una máscara con separadores excesivos que el usuario constantemente evita causa más daño que beneficio. Si no estás seguro del formato, usa entrada libre.

Para aplicaciones internacionales, ten en cuenta que los formatos de datos pueden diferir entre países. Un número de teléfono en EE. UU. tiene el formato +1 (XXX) XXX-XXXX, mientras que en Italia es +39 XXX XXX XXXX. Usa máscaras prioritarias con detección automática de país por código, o permite que el usuario elija un país antes de ingresar el número.

Según pruebas de UX de InputMask, los usuarios prefieren máscaras que muestren el formato antes de comenzar a ingresar datos (mediante marcador de posición o afijo) y que no bloqueen la entrada de caracteres. Una máscara debe ser una sugerencia, no una restricción. Si el usuario ingresa un carácter que no coincide con la máscara, es mejor permitirlo que bloquear la entrada sin explicación.