Составные маски

Составные маски представляют собой механизм объединения нескольких шаблонов ввода в одну логическую структуру, позволяющую полю ввода адаптироваться к различным форматам данных. В отличие от простых масок фиксированной структуры, составные маски оперируют набором альтернативных правил, между которыми происходит переключение в зависимости от введённых символов, длины строки или пользовательской логики.

Основная идея заключается в том, что одна маска описывает не один формат, а множество совместимых форматов, объединённых общим интерфейсом обработки ввода.

Множественные маски как массив шаблонов

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

Inputmask({
  mask: ["999-999-9999", "+9 (999) 999-9999", "+99 (999) 999-9999"]
}).mask(input);

В данном случае:

  • первый шаблон соответствует локальному формату номера
  • второй — международному формату с одной цифрой кода страны
  • третий — расширенному международному формату

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

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

Альтернативные маски и символ |

Составные маски могут быть заданы через альтернативные выражения внутри одной строки. Символ | используется как разделитель вариантов, формируя логическое «ИЛИ» между частями шаблона.

Inputmask({
  mask: "999-999-9999|+9 (999) 999-9999"
}).mask(input);

Такой формат интерпретируется как два параллельных правила. При вводе система сопоставляет текущий ввод с каждым вариантом и выбирает наиболее подходящий путь продолжения.

Особенность заключается в том, что альтернативы могут иметь различную длину и структуру, что позволяет объединять несовместимые форматы в единый вводный элемент.

Диспетчеризация масок через логику условий

Более гибкий вариант составных масок реализуется через функцию-распределитель (dispatch). Такой подход позволяет динамически выбирать маску на основе содержимого ввода.

Inputmask({
  mask: function (value) {
    return value.startsWith("+")
      ? "+999 999 999 999"
      : "999-999-9999";
  }
}).mask(input);

В этом механизме выбор маски происходит на каждом этапе изменения значения. Функция получает текущее состояние поля и возвращает соответствующий шаблон.

Данный подход применяется в сценариях, где структура данных зависит от первого символа, длины строки или специфических префиксов.

Составные маски с условными блоками

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

Пример структуры:

Inputmask({
  mask: "+9{1,3} (999) 999-9999"
}).mask(input);

Здесь диапазон повторений создаёт вариативность кода страны, формируя фактически несколько возможных масок внутри одной декларации.

Дополнительно используются:

  • обязательные блоки
  • опциональные сегменты
  • повторяемые группы

Комбинация этих элементов создаёт поведение, близкое к регулярным выражениям, но с контекстной привязкой к позиции курсора.

Поведение курсора в составных масках

При работе с множественными шаблонами ключевую роль играет алгоритм позиционирования курсора. В Inputmask используется адаптивная модель, которая пересчитывает позицию каретки при каждом изменении входного значения.

Особенности поведения:

  • переключение между альтернативными масками может изменять длину строки
  • удаление символов может приводить к переходу на более общий шаблон
  • вставка значения может инициировать перерасчёт структуры

Стабильность курсора достигается за счёт нормализации значения после каждого ввода и пересчёта «идеальной» позиции в рамках выбранной маски.

Приоритеты и стратегия выбора маски

При наличии нескольких вариантов масок используется стратегия сопоставления по максимальной специфичности.

Основные принципы:

  • более длинные и строгие маски имеют приоритет
  • маски с фиксированными символами (например, префиксами) выбираются раньше
  • шаблоны с большим количеством определённых цифр считаются более точными

Если несколько масок подходят одинаково, выбор определяется порядком объявления.

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

Одним из наиболее типичных применений является обработка телефонных номеров различных стран и форматов.

Inputmask({
  mask: [
    "+7 (999) 999-99-99",
    "+1 (999) 999-9999",
    "+44 99 9999 9999"
  ]
}).mask(input);

Такая структура позволяет обрабатывать:

  • разные длины номеров
  • различные коды стран
  • отличающиеся правила группировки цифр

При этом логика выбора маски происходит автоматически по мере ввода префикса.

Составные маски для платежных данных

В сценариях ввода банковских данных часто используется определение типа карты по первым цифрам и переключение маски.

Inputmask({
  mask: function (value) {
    if (value.startsWith("4")) {
      return "9999 9999 9999 9999";
    }
    if (value.startsWith("5")) {
      return "9999 9999 9999 9999";
    }
    return "9999 9999 9999 9999 999";
  }
}).mask(input);

Несмотря на визуальное сходство шаблонов, различие может заключаться в длине, группировке или дополнительных проверках.

Влияние greedy-режима на составные маски

Параметр greedy влияет на поведение расширяемых масок, особенно при наличии альтернативных веток. В режиме высокой жадности система стремится занять максимально возможную длину ввода, что может смещать выбор в сторону более длинных шаблонов.

При сниженной жадности предпочтение отдаётся более компактным вариантам, что влияет на динамическое переключение между альтернативами.

Взаимодействие с alias и предустановками

Составные маски часто комбинируются с alias-конфигурациями, где базовый шаблон расширяется набором вариантов.

Inputmask({
  alias: "numeric",
  mask: ["999", "9999", "99999"]
}).mask(input);

В таких случаях alias задаёт базовую семантику, а маски уточняют структуру допустимых значений.

Нормализация и пересчёт значений

При смене маски в процессе ввода выполняется переразбор текущего значения:

  • удаляются символы-разделители, не соответствующие новой структуре
  • пересчитываются позиции заполненных полей
  • восстанавливается соответствие шаблону

Данный процесс обеспечивает согласованность данных при переходе между альтернативными форматами.

Ограничения и особенности композиции масок

Составные маски накладывают дополнительные требования на проектирование шаблонов:

  • пересекающиеся форматы могут приводить к неоднозначному выбору
  • слишком близкие маски усложняют алгоритм сопоставления
  • чрезмерное количество альтернатив снижает предсказуемость поведения ввода

Оптимальная структура достигается при чётком разделении форматов по префиксам или длине, что минимизирует конфликт интерпретации.

Оглавление