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 або афікс) і не блокують введення символів. Маска повинна бути підказкою, а не обмеженням. Якщо користувач вводить символ, що не відповідає масці, краще дозволити йому це зробити, ніж заблокувати введення без пояснення причини.