Настройка разделителей

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

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

Основные типы разделителей

Разделитель групп разрядов (thousands separator)

Разделитель групп разрядов используется для визуального упрощения больших чисел. Например:

  • 1000000 → 1,000,000 (английский формат)
  • 1000000 → 1 000 000 (европейский формат)

В Inputmask за этот функционал отвечает параметр groupSeparator.

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

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

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

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

Наиболее распространённые варианты:

  • . — англосаксонский формат (12.34)
  • , — европейский формат (12,34)
Inputmask({
  alias: "numeric",
  radixPoint: "."
}).mask("#price");

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

Автоматическая группировка разрядов

Параметр autoGroup управляет автоматическим добавлением разделителей групп.

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

При включённом autoGroup библиотека:

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

Если autoGroup отключён, символы разделителя не вставляются автоматически, даже если groupSeparator задан.

Настройка алиаса numeric

Чаще всего работа с разделителями реализуется через алиас "numeric", который уже включает базовую логику числовой маски.

Основные параметры, влияющие на разделители:

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

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

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

В этом случае число будет отображаться в формате:

1 234 567,89

Управление локализацией формата чисел

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

Регион Разделитель групп Десятичный символ
США , .
ЕС . или пробел ,
СНГ пробел ,

Inputmask не выполняет автоматическую локализацию по умолчанию, поэтому все символы задаются вручную.

Пример настройки под русскую локаль:

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

Влияние разделителей на извлекаемое значение

Одним из ключевых аспектов является различие между отображаемым и «сырым» значением.

При включённых разделителях:

1 000 000,50

Фактическое значение (unmasked):

1000000.50

Это поведение контролируется внутренним парсером Inputmask, который:

  • удаляет groupSeparator;
  • нормализует radixPoint в стандартный формат;
  • возвращает числовую строку без визуального оформления.

Пользовательские разделители

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

Примеры нестандартных групповых разделителей

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

Результат:

1'000'000

Также допустимы пробелы, символы Unicode и визуальные маркеры:

Inputmask({
  alias: "numeric",
  groupSeparator: "·",
  radixPoint: "·"
}).mask("#custom");

Ограничения и особенности поведения

1. Конфликт символов

Если groupSeparator совпадает с radixPoint, поведение становится неоднозначным. Например:

groupSeparator: ",",
radixPoint: ","

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

2. Ввод без дробной части

При отсутствии digits и radixPoint дробная часть полностью отключается, и разделители работают только для целой части.

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

3. Поведение при удалении символов

При обратном удалении символов Inputmask:

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

Сочетание с дополнительными параметрами

digits и разделители

Количество дробных знаков напрямую влияет на отображение разделителей:

Inputmask({
  alias: "numeric",
  groupSeparator: ",",
  radixPoint: ".",
  digits: 4
}).mask("#precision");

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

12,345.6789

digitsOptional

Если включён digitsOptional, дробная часть становится необязательной:

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

Возможные вводы:

1000
1000,5
1000,50

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

При установке значения через JavaScript Inputmask применяет те же правила форматирования:

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

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

el.inputmask.setValue("1000000.25");

Отображаемый результат:

1 000 000,25

Производительность при большом вводе

При работе с длинными числами (10+ цифр) механизм разделителей может вызывать дополнительные перерасчёты строки. Inputmask оптимизирует процесс за счёт:

  • минимизации перерисовки DOM-значения;
  • перерасчёта только изменённой части строки;
  • кеширования текущей структуры групп.

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

Типовые ошибки при настройке разделителей

Неправильный порядок параметров

Inputmask({
  autoGroup: true,
  groupSeparator: "",
  radixPoint: "."
});

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

Несовместимость с кастомными масками

При использовании mask: "decimal" или пользовательских паттернов часть логики numeric может быть переопределена, и разделители перестают работать автоматически.

Отсутствие явного radixPoint

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

Механизм внутренней нормализации

При обработке ввода Inputmask выполняет последовательные шаги:

  1. Удаление всех groupSeparator
  2. Замена radixPoint на стандартный символ .
  3. Проверка допустимых символов
  4. Применение правил digits
  5. Формирование итогового значения

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

Оглавление