Группировка разрядов

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

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

  • 1000 → 1 000
  • 1000000 → 1 000 000

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

Алиас numeric и включение группировки

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

Inputmask("numeric").mask(document.querySelectorAll("input"));

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

Параметр autoGroup

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

Inputmask({
  alias: "numeric",
  autoGroup: true
}).mask("#amount");

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

Если параметр отключён:

Inputmask({
  alias: "numeric",
  autoGroup: false
}).mask("#amount");

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

Разделитель групп: groupSeparator

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

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

Варианты использования:

  • " " — пробел (распространён в русской локализации)
  • "," — стандарт в англоязычных интерфейсах
  • "." — используется в некоторых европейских форматах

Направление группировки и поведение курсора

Группировка разрядов влияет на позиционирование курсора и обработку ввода. При включённом autoGroup Inputmask пересчитывает положение курсора после каждой операции вставки символа.

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

  • raw value (неформатированное значение)
  • display value (отображаемое значение)

Сочетание с digits и дробной частью

Группировка разрядов применяется преимущественно к целой части числа. При использовании дробей важно учитывать взаимодействие с параметром digits.

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

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

  • целая часть группируется
  • дробная часть отделяется фиксированным разделителем (например, запятой или точкой)

Пример результата:

  • ввод: 1234567.89
  • отображение: 1 234 567.89

digitsOptional и влияние на формат

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

Inputmask({
  alias: "numeric",
  autoGroup: true,
  groupSeparator: " ",
  digits: 2,
  digitsOptional: true
}).mask("#price");

Поведение:

  • 1000 → 1 000
  • 1000.5 → 1 000.5
  • 1000.50 → 1 000.50

rightAlign и визуальное выравнивание

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

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

При включённом rightAlign число визуально прижимается к правому краю, что улучшает восприятие финансовых значений.

Обработка ввода и пересчёт групп

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

  1. Извлекает «сырое» числовое значение без разделителей
  2. Пересчитывает разбиение на группы по три цифры справа налево
  3. Применяет groupSeparator
  4. Восстанавливает позицию курсора

Этот процесс происходит синхронно, обеспечивая отсутствие «разрывов» при наборе.

Пользовательские разделители и нестандартные форматы

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

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

Пример форматов:

  • 1'000'000
  • 1|000|000
  • 1·000·000

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

Локализация и региональные стандарты

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

  • Запятая как разделитель тысяч и точка как десятичный разделитель
  • Пробел как разделитель тысяч
  • Обратные комбинации в некоторых европейских форматах

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

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

Сложные комбинации параметров

Группировка разрядов часто используется вместе с дополнительными ограничениями:

Inputmask({
  alias: "numeric",
  autoGroup: true,
  groupSeparator: " ",
  digits: 0,
  min: 0,
  max: 1000000000,
  rightAlign: false
}).mask("#budget");

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

Типичные проблемы и ограничения

При работе с группировкой разрядов возникают характерные особенности:

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

Пример корректной установки значения:

const el = document.querySelector("#amount");
Inputmask("numeric").mask(el);

el.inputmask.setValue(1000000);

В этом случае значение автоматически отобразится как 1 000 000 при активной группировке.

Поведение при очистке и повторном вводе

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

Оглавление