Механизм автоматического форматирования в Inputmask строится вокруг идеи постоянной синхронизации вводимого пользователем значения с заранее заданной маской. Маска выступает формальным описанием структуры строки, а библиотека в реальном времени преобразует ввод в соответствии с этим описанием, контролируя допустимые символы, позиции и визуальное представление данных.
При подключении маски к элементу ввода Inputmask перехватывает события клавиатуры, вставки и изменения значения поля. Каждый вводимый символ проходит через слой обработки, где определяется его допустимость в текущей позиции маски. Если символ соответствует правилам, он вставляется, после чего значение немедленно приводится к формату маски.
Ключевая особенность заключается в том, что преобразование происходит не после завершения ввода, а непрерывно. Это создаёт эффект «самоформатирующегося» поля, в котором пользователь всегда видит корректное представление данных.
Маска представляет собой строку, где специальные символы задают тип данных, а литералы формируют фиксированную структуру. Например:
9 — цифровой символa — буквенный символ* — любой символЛитералы (например, скобки, дефисы, пробелы) автоматически вставляются библиотекой в процессе ввода.
Автоматическое форматирование основано на последовательном прохождении маски слева направо. Каждая позиция либо ожидает ввод пользователя, либо заполняется фиксированным символом.
Одним из ключевых аспектов автоформатирования является управление кареткой. После каждого ввода Inputmask пересчитывает позицию курсора, чтобы пользователь продолжал ввод в логически корректной позиции.
Если вводимый символ приводит к автоматической вставке литералов, курсор перескакивает через них без участия пользователя. Например, при маске телефона:
+7 (999) 999-99-99ввод цифр автоматически сопровождается добавлением скобок, пробелов и дефисов, при этом курсор остаётся на следующей свободной позиции.
Автоформатирование тесно связано с механизмом placeholder. В незаполненных позициях маски отображаются символы-заглушки, которые визуально подсказывают структуру данных.
Inputmask поддерживает поведение, при котором:
Это создаёт эффект динамического шаблона, который всегда отражает ожидаемую структуру данных.
Каждое нажатие клавиши инициирует цикл обработки:
В результате формируется непрерывный поток преобразований, где пользовательский ввод никогда не существует в «сыром» виде внутри поля.
Удаление символов в маскированных полях не является прямым удалением строки. Вместо этого Inputmask пересчитывает состояние маски и восстанавливает корректную структуру.
Особенности поведения:
Это предотвращает разрушение структуры маски даже при произвольных действиях пользователя.
При вставке данных Inputmask выполняет дополнительный этап нормализации. Вставляемая строка может не соответствовать маске, поэтому применяется алгоритм фильтрации:
Например, при вставке номера телефона без форматирования библиотека автоматически преобразует строку в структурированный вид.
Алиасы представляют собой преднастроенные маски для типовых данных: телефоны, даты, валюты, IP-адреса.
Автоматическое форматирование в алиасах включает дополнительную логику:
Алиасы позволяют скрыть сложность маскирования за декларативной конфигурацией.
Inputmask позволяет определять собственные правила ввода через
definitions. Это расширяет механизм автоформатирования,
добавляя новые типы символов.
Пример логики:
При каждом вводе Inputmask проверяет не только стандартные типы, но и пользовательские определения, интегрируя их в общий алгоритм форматирования.
Перед началом работы маски Inputmask может преобразовывать исходное значение. Это особенно важно при инициализации уже заполненных полей.
Используются механизмы:
onBeforeMask — преобразование входного значения перед
применением маски;onBeforePaste — нормализация вставляемых данных;onBeforeWrite — контроль итоговой строки перед
отображением.Эти хуки позволяют согласовать произвольные данные с форматом маски, обеспечивая единообразие отображения.
Числовые маски используют отдельную логику автоформатирования, учитывающую:
При вводе число динамически переразбивается на группы, а позиция разделителей корректируется автоматически.
Дата и время обрабатываются как структурированные последовательности:
При вводе каждого сегмента Inputmask ограничивает диапазон допустимых значений, предотвращая появление некорректных дат.
Автоматическое форматирование может приводить к ряду специфических эффектов, которые обусловлены строгой логикой маски:
Поведение всегда определяется приоритетом структуры маски над произвольным вводом, что обеспечивает консистентность данных, но требует точного проектирования шаблонов.