Input Mask: что это такое, маски ввода и форматирование

Что такое Input Mask?

Input Mask (маска ввода) — это механизм, который определяет шаблон вводимых данных и автоматически форматирует текст по мере его набора. Пользователь вводит только значимые символы (цифры, буквы), а система автоматически добавляет разделители: пробелы, дефисы, скобки, слэши. Это ключевое отличие от пост-обработки, где данные форматируются после завершения ввода.

Маски ввода решают три проблемы пользовательского опыта. Первая — когнитивная нагрузка: пользователю не нужно помнить формат данных и вручную расставлять разделители. Вторая — скорость ввода: автоматическая подстановка разделителей и переход к следующей группе символов ускоряют набор. Третья — качество данных: маска гарантирует, что данные будут собраны в едином формате без вариаций.

В отличие от форматтеров NSFormatter, которые работают на уровне отображения уже введённых данных, Input Mask работает на уровне ввода: она контролирует каждый вводимый символ и определяет, допустим ли он в текущей позиции маски. Если символ не соответствует маске, он отклоняется или игнорируется.

По данным UX-исследований Apple (2024), маски ввода наиболее эффективны для полей, где пользователь вводит данные в незнакомом формате. Например, СНИЛС (000-000-000 00) или ИНН (000000000000) — пользователь может не знать точное количество цифр или расположение разделителей, и маска подсказывает правильный формат визуально.

Синтаксис маски ввода

Синтаксис маски в библиотеке InputMask использует комбинацию символов-заполнителей и константных символов. Заполнители определяют тип допустимого символа на каждой позиции: 0 или 9 для цифр, A для букв, _ для любого символа. Константные символы — это разделители, которые вставляются автоматически: пробелы, дефисы, скобки, точки, слэши.

Обязательные и необязательные блоки

Квадратные скобки [0] обозначают обязательный символ — пользователь должен ввести цифру на этой позиции. Фигурные скобки {0} обозначают необязательный символ — если пользователь пропускает блок, маска не вставляет соответствующие разделители. Например, маска [00]{.}[00]{.}[0000] для даты: если пользователь не вводит месяц, разделитель после дня также не отображается.

Аффикс маски

Константные символы вне квадратных и фигурных скобок являются аффиксом — они отображаются всегда, даже если поле пустое. Например, в маске +7 ([000]) [000]-[00]-[00] символы +7, (, ), пробел и дефис являются аффиксом и не могут быть удалены пользователем. Аффикс помогает пользователю понять ожидаемый формат ещё до начала ввода.

Типы масок по назначению

Маски ввода классифицируются по типу данных, для которых они предназначены. Каждый тип имеет свою структуру, количество групп и расположение разделителей. Правильный выбор маски критичен для пользовательского опыта — если маска не соответствует ожиданиям пользователя, он будет удалять автоматически вставленные символы.

Маски для телефонных номеров

Телефонные маски — наиболее распространённый тип. Российский номер форматируется как +7 ([000]) [000]-[00]-[00], американский как +1 ([000]) [000]-[0000]. Маска должна поддерживать разное количество цифр в коде страны и городе. Библиотека InputMask поддерживает приоритетные маски: если первая маска не подходит (пользователь ввёл код другой страны), применяется вторая.

Маски для банковских карт

Для номеров карт используется маска [0000] [0000] [0000] [0000] с пробелами между группами по 4 цифры. Дополнительно может применяться маска для срока действия [00]/[00] и CVV-кода [000]. Маска для номера карты поддерживает 16–19 цифр в зависимости от платёжной системы: Visa и Mastercard — 16 цифр, American Express — 15, Maestro — 12–19.

Маски для дат и кодов

Маски дат используют формат [00]{.}[00]{.}[0000] с разделителем в виде точки или слэша. Для ИНН, СНИЛС и других идентификаторов применяются специализированные маски: ИНН — [000000000000] (12 цифр), СНИЛС — [000]-[000]-[000] [00] (11 цифр с дефисами). Для кодов подтверждения — [0000] или [000000] в зависимости от длины.

Реализация маски в Swift

Реализация маски в Swift выполняется через установку делегата UITextFieldDelegate с использованием библиотеки InputMask. Библиотека предоставляет класс MaskedTextFieldDelegate, который подключается к текстовому полю и автоматически форматирует ввод в соответствии с заданной маской.

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

Для телефонных номеров с автоматическим определением страны используйте приоритетные маски. MaskedTextFieldDelegate поддерживает массив масок: первая подходящая применяется. Если пользователь вводит код +1, применяется американский формат, если +7 — российский.

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

Для даты с необязательными блоками используйте фигурные скобки. Если пользователь вводит только день, маска отображается как «21». Если вводит день и месяц — «21.07». Если все три компонента — «21.07.2026». Необязательные блоки делают маску адаптивной и не принуждают пользователя вводить данные, которые он не хочет предоставлять.

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

Обработка вставки и удаления

Корректная обработка вставки — один из самых сложных аспектов реализации маски ввода. При вставке текста (например, номера карты из буфера обмена) библиотека должна удалить все разделители из вставляемого текста, извлечь только значимые символы и применить маску к чистым данным. InputMask от RedMadRobot делает это автоматически через метод shouldChangeCharactersIn.

При вставке отформатированного текста (с пробелами или дефисами) библиотека сначала нормализует данные: удаляет все символы, не соответствующие шаблону маски, затем применяет маску к нормализованной строке. Если вставленный текст содержит недопустимые символы (буквы в цифровой маске), они игнорируются.

Обработка удаления (backspace) в маске требует особого внимания. При нажатии backspace маска должна удалять последний значимый символ, а не константный разделитель. Если курсор стоит после константного символа, backspace должен пропустить его и удалить предыдущий значимый символ. InputMask реализует это поведение через стэк введённых символов.

Для выделения и замены текста маска должна корректно обрабатывать ситуации, когда пользователь выделяет часть текста и заменяет его новым. Библиотека InputMask поддерживает это через метод modifyString в MaskedTextFieldDelegate, который принимает диапазон замены и новую строку.

Рекомендации по проектированию масок

Проектирование маски начинается с анализа того, как пользователь будет вводить данные. Если большинство пользователей знают формат наизусть (номер телефона), маска должна быть минимальной — только разделители между группами. Если формат незнакомый (СНИЛС, ИНН), маска должна быть более информативной, с аффиксом и подписями.

Избегайте избыточных масок с большим количеством константных символов. Маска +7 ([000]) [000]-[00]-[00] содержит 7 константных символов на 10 значимых — это приемлемо. Но маска с избыточными разделителями, которую пользователь постоянно обходит, приносит больше вреда, чем пользы. Если сомневаетесь в формате — используйте свободный ввод.

Для международных приложений учитывайте, что формат данных может отличаться в разных странах. Номер телефона в США имеет формат +1 (XXX) XXX-XXXX, а в Италии — +39 XXX XXX XXXX. Используйте приоритетные маски с автоматическим определением страны по коду или предоставьте пользователю выбор страны перед вводом номера.

По данным UX-тестирования InputMask, пользователи предпочитают маски, которые показывают формат до начала ввода (через placeholder или аффикс) и не блокируют ввод символов. Маска должна быть подсказкой, а не ограничением. Если пользователь вводит символ, не соответствующий маске, лучше позволить ему это сделать, чем заблокировать ввод без объяснения причины.