Разделители и их локализация

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

В контексте Inputmask выделяются несколько классов разделителей:

  • разделитель тысяч (group separator) — используется для визуального разбиения больших чисел;
  • десятичный разделитель (radix point) — отделяет целую и дробную части;
  • разделители дат — символы между компонентами даты (день, месяц, год);
  • разделители времени — символы между часами, минутами и секундами;
  • служебные разделители масок — символы, задающие структуру шаблона.

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

Тысячи и группировка разрядов

Группировка разрядов реализуется через параметры groupSeparator и autoGroup. Первый определяет символ-разделитель, второй включает автоматическую вставку разделителя при вводе.

Inputmask("numeric", {
  groupSeparator: " ",
  autoGroup: true
}).mask("#number");

В данном случае числа формата 1000000 будут автоматически преобразованы в 1 000 000.

Ключевым аспектом является то, что группировка не влияет на внутреннее значение. Inputmask хранит «чистую» версию числа, удаляя разделители при извлечении данных через unmaskedvalue.

Поведение группировки регулируется следующими параметрами:

  • autoGroup — автоматическая вставка разделителей;
  • groupSeparator — символ разделителя;
  • radixPoint — влияет на восприятие границы дробной части;
  • digits — количество знаков после запятой.

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

Десятичный разделитель

Десятичный разделитель задаётся параметром radixPoint. Он определяет символ, который отделяет целую часть числа от дробной.

Inputmask("numeric", {
  radixPoint: ","
}).mask("#price");

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

Поведение десятичного разделителя связано с:

  • digits — фиксированное количество знаков после разделителя;
  • digitsOptional — разрешение на отсутствие дробной части;
  • enforceDigitsOnBlur — принудительное форматирование при потере фокуса.

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

Локализация числовых форматов

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

  • groupSeparator
  • radixPoint
  • digits
  • autoGroup

Пример конфигурации для европейского формата:

Inputmask("numeric", {
  groupSeparator: ".",
  radixPoint: ",",
  autoGroup: true,
  digits: 2
}).mask("#amount");

И для англоязычного формата:

Inputmask("numeric", {
  groupSeparator: ",",
  radixPoint: ".",
  autoGroup: true,
  digits: 2
}).mask("#amount");

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

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

Настройка валютных масок

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

Inputmask("currency", {
  prefix: "$ ",
  groupSeparator: ",",
  radixPoint: ".",
  digits: 2,
  autoGroup: true
}).mask("#salary");

Разделители в валютных масках выполняют не только визуальную функцию, но и помогают предотвратить ошибки ввода:

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

Важным аспектом является взаимодействие prefix с группировкой. Префикс не должен попадать в числовую часть, поэтому Inputmask отделяет его логически, несмотря на визуальную связанность.

Работа с датами и временными разделителями

В масках дат разделители играют структурную роль, определяя границы между компонентами:

Inputmask("datetime", {
  inputFormat: "dd.mm.yyyy",
  placeholder: "dd.mm.yyyy"
}).mask("#date");

В этом случае символ . является фиксированным разделителем между частями даты.

Поддерживаются различные варианты:

  • dd/mm/yyyy
  • yyyy-mm-dd
  • dd-mm-yyyy

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

Для времени:

Inputmask("datetime", {
  inputFormat: "HH:MM:ss"
}).mask("#time");

Символ : выступает как разделитель временных компонентов. Он фиксирует структуру ввода и предотвращает смещение значений при частичном вводе.

Переопределение символов и definitions

Inputmask позволяет полностью переопределять поведение символов через definitions, что напрямую влияет на работу разделителей.

Inputmask.extendDefinitions({
  "~": {
    validator: "[0-9]",
    definitionSymbol: "~"
  }
});

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

Переопределение позволяет:

  • заменить стандартные символы разделителей;
  • создать альтернативные локализации;
  • внедрить нестандартные форматы ввода.

Автоматическое форматирование и поведение ввода

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

Inputmask отслеживает ввод каждого символа и пересчитывает позицию разделителей в реальном времени. Это включает:

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

Особенно важен механизм восстановления позиции курсора, так как вставка разделителя не должна сбивать поток ввода. Для этого Inputmask использует внутренние вычисления смещения индекса символов.

Практические сценарии

В реальных приложениях работа разделителей проявляется в нескольких типовых сценариях.

Финансовые формы требуют строгой фиксации:

Inputmask("numeric", {
  groupSeparator: " ",
  radixPoint: ".",
  digits: 2,
  autoGroup: true,
  rightAlign: false
}).mask(".finance-input");

Системы учёта часто используют локальные стандарты:

Inputmask("numeric", {
  groupSeparator: ".",
  radixPoint: ",",
  digits: 3,
  autoGroup: true
}).mask(".accounting-input");

Формы ввода дат в административных интерфейсах требуют жёсткой структуры:

Inputmask("datetime", {
  inputFormat: "yyyy-mm-dd",
  separator: "-"
}).mask(".date-input");

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

Оглавление