Множественные варианты масок

Поддержка множественных вариантов маски в Inputmask реализует механизм, при котором одно поле ввода может принимать несколько форматов данных одновременно. Это необходимо в случаях, когда структура вводимых значений не фиксирована: различная длина номера телефона, альтернативные форматы идентификаторов, региональные различия в записи дат или документов.

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

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

Наиболее компактный способ задания нескольких вариантов маски основан на использовании оператора альтернатив внутри строки маски.

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

В данном случае определены два допустимых варианта первой части:

  • 999-9999
  • 9999-9999

Механизм альтернатив работает на уровне сегментов: Inputmask анализирует возможные ветки и пытается определить подходящую в момент ввода.

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

Поведение выбора варианта и keepStatic

Ключевой параметр, влияющий на обработку множественных масок, — keepStatic.

Inputmask({
  mask: "(99|999)-9999",
  keepStatic: true
}).mask(input);

keepStatic: true

При включённом режиме библиотека стремится зафиксировать один наиболее подходящий вариант и не пересчитывать структуру маски при каждом вводе символа. Это приводит к более стабильному поведению курсора и снижает вероятность «перескоков» между вариантами.

Поведение становится предсказуемым:

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

keepStatic: false

При отключённом режиме Inputmask динамически пересчитывает возможные варианты на каждом шаге ввода.

Это приводит к:

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

Множественные маски в виде массива

Альтернативный подход заключается в передаче массива масок вместо одной строки.

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

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

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

  • каждая маска интерпретируется отдельно;
  • выбор осуществляется по мере ввода первого символа;
  • возможна смена маски при недостаточной определённости;
  • при неоднозначности применяется стратегия приоритета.

Этот подход часто используется для поддержки разных региональных форматов телефонов или документов.

Алгоритм разрешения неоднозначности

При наличии нескольких вариантов Inputmask использует эвристический механизм:

  1. Анализ первого введённого символа
  2. Проверка соответствия по всем доступным маскам
  3. Сужение списка кандидатов
  4. Выбор наиболее специфичного шаблона

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

Динамическое определение маски через функцию

Более сложный уровень управления множественными вариантами реализуется через функцию, возвращающую маску.

Inputmask({
  mask: function () {
    return /\\d/.test(this.value) && this.value.length > 10
      ? "+9 (999) 999-9999"
      : "999-9999";
  }
}).mask(input);

Такая конструкция позволяет:

  • менять структуру маски в зависимости от текущего значения;
  • учитывать длину ввода;
  • реагировать на контекст (например, тип данных).

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

Комбинация альтернатив и повторяющихся сегментов

Варианты масок могут включать повторяющиеся конструкции:

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

Здесь совмещаются:

  • диапазон повторений 9{1,3}
  • альтернативные группы (999|9999)

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

Регулярные выражения как форма множественных вариантов

Регулярные выражения в Inputmask также могут выступать способом задания множественных форматов.

Inputmask({
  regex: "(\\d{3}-\\d{2}-\\d{4}|\\d{2}-\\d{7})"
}).mask(input);

В этом случае:

  • первая альтернатива соответствует формату XXX-XX-XXXX;
  • вторая — XX-XXXXXXX.

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

Особенности caret-позиционирования при множественных масках

При наличии альтернативных вариантов позиционирование курсора становится сложнее. Основные проблемы возникают при:

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

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

Производительность при множественных вариантах

Рост числа альтернатив напрямую влияет на производительность:

  • увеличивается количество проверок соответствия;
  • усложняется логика выбора маски;
  • возрастает нагрузка при каждом input событии.

Особенно заметно это при использовании:

  • массивов с большим количеством масок;
  • вложенных альтернатив (a|b|c|d|...);
  • динамических функций, пересчитывающих маску на каждом вводе.

Практические сценарии применения

Телефонные номера разных стран

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

Разные форматы идентификаторов

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

Комбинированные коды

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

Типовые проблемы при проектировании альтернатив

Пересекающиеся шаблоны

Если несколько масок частично совпадают, выбор становится неоднозначным:

  • 999-9999
  • 9999-999

Такие конфигурации приводят к нестабильному переключению.

Слишком широкие альтернативы

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

Конфликты длины

Разные длины масок могут вызывать скачки курсора при переключении между вариантами.

Стратегии стабилизации поведения

Для повышения устойчивости множественных масок применяются следующие подходы:

  • упорядочивание массива от наиболее специфичных к более общим;
  • ограничение количества альтернативных веток;
  • использование keepStatic для фиксации выбора;
  • минимизация пересечений по структуре;
  • предпочтение явных форматов вместо широких диапазонов.

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

Механизм множественных вариантов в Inputmask строится на трёх базовых подходах:

  • синтаксические альтернативы внутри строки маски;
  • массив независимых масок;
  • динамическая генерация через функцию или регулярное выражение.

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

Оглавление