Настройка формата чисел

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

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

Базовая инициализация числовой маски строится вокруг объекта конфигурации:

Inputmask({
  alias: "numeric"
}).mask(selector);

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

Дробная часть и управление точностью

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

digits

Параметр digits определяет фиксированную или максимальную точность дробной части:

Inputmask({
  alias: "numeric",
  digits: 2
}).mask(selector);

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

digitsOptional

Гибкость дробной части задаётся через digitsOptional. Этот параметр управляет обязательностью заполнения дробной части:

Inputmask({
  alias: "numeric",
  digits: 2,
  digitsOptional: true
}).mask(selector);

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

Разделитель дробной части и локализация

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

radixPoint

Параметр radixPoint задаёт символ разделения целой и дробной части:

Inputmask({
  alias: "numeric",
  digits: 2,
  radixPoint: "."
}).mask(selector);

Для регионов с запятой используется альтернативная конфигурация:

Inputmask({
  alias: "numeric",
  digits: 2,
  radixPoint: ","
}).mask(selector);

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

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

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

groupSeparator и autoGroup

Параметры groupSeparator и autoGroup отвечают за разбиение числа на группы:

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

В этом случае число 1000000 будет отображено как 1 000 000.

Для альтернативных локалей часто используется запятая:

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

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

Управление знаком числа

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

allowMinus

Inputmask({
  alias: "numeric",
  allowMinus: true
}).mask(selector);

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

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

Ограничение диапазона значений

Контроль диапазона реализуется через параметры min и max. Эти значения определяют допустимые границы числового ввода.

min и max

Inputmask({
  alias: "numeric",
  min: 0,
  max: 100
}).mask(selector);

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

Диапазон работает совместно с дробной частью:

Inputmask({
  alias: "numeric",
  min: 0,
  max: 10,
  digits: 2
}).mask(selector);

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

Выравнивание значения

rightAlign

Параметр rightAlign влияет на визуальное расположение числа внутри поля ввода:

Inputmask({
  alias: "numeric",
  rightAlign: false
}).mask(selector);

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

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

Работа с ведущими нулями

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

Пример нормализации:

  • ввод: 000123
  • результат: 123

Поведение зависит от сочетания autoGroup, rightAlign и внутренней нормализации значения. В числовом режиме библиотека стремится к приведению строки к каноническому виду числа.

Обработка ввода в реальном времени

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

  1. Извлечение цифровых символов
  2. Определение знака
  3. Разделение на целую и дробную часть
  4. Применение ограничений digits
  5. Проверка диапазона min/max
  6. Форматирование с учётом groupSeparator
  7. Перерисовка значения в поле

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

Поддержка экспоненциальной записи

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

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

Комбинирование параметров для финансовых форматов

Финансовые интерфейсы требуют строгого контроля точности и отображения.

Типичная конфигурация:

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

Такая настройка обеспечивает:

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

Обработка вставки и внешних значений

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

Пример поведения:

  • вставка 1,000.5678
  • преобразование в 1 000.56 при digits: 2 и groupSeparator: " "

Любые лишние символы, включая буквы и спецзнаки, отбрасываются на этапе парсинга.

Сочетание с кастомными алиасами

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

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

Пример расширения для процентов:

Inputmask({
  alias: "numeric",
  suffix: "%",
  digits: 1,
  max: 100
}).mask(selector);

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

Особенности внутренней нормализации

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

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

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

Поведение при частично введённых значениях

При незавершённом вводе маска сохраняет промежуточное состояние:

  • 12. при ожидании дробной части
  • 0. при начале дробного ввода
  • - как промежуточное состояние отрицательного числа

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

Совместимость параметров и приоритеты

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

  1. min/max имеют высший приоритет над форматированием
  2. digits ограничивает дробную часть до применения отображения
  3. groupSeparator применяется только после нормализации числа
  4. rightAlign влияет исключительно на визуальный слой
  5. suffix/prefix не участвуют в числовой логике

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

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

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

Пример:

  • ввод: 12ab34,56
  • результат: 1234.56 (при соответствующей конфигурации разделителя)

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

Оглавление