Числовые маски

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

Алиас numeric активирует набор предустановленных параметров, определяющих поведение числового поля:

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

Простейшая инициализация:

Inputmask("numeric").mask(inputElement);

При этом ввод автоматически ограничивается числовыми символами с учётом конфигурации локали и внутренних настроек библиотеки.

Целочисленные маски

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

Inputmask("integer").mask(inputElement);

Поведение включает:

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

Ключевые параметры:

  • allowMinus — разрешение отрицательных чисел;
  • rightAlign — выравнивание значения по правому краю;
  • groupSeparator — символ группировки разрядов.

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

Inputmask("integer", {
  allowMinus: true,
  rightAlign: false,
  groupSeparator: " ",
  autoGroup: true
}).mask(inputElement);

Десятичные числа и дробная часть

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

Inputmask("decimal").mask(inputElement);

Основные параметры:

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

Пример фиксированной точности:

Inputmask("decimal", {
  digits: 2,
  radixPoint: "."
}).mask(inputElement);

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

Управление разрядностью и группировкой

Числовые маски поддерживают форматирование больших чисел с использованием разделителей тысяч. Это реализуется через комбинацию параметров groupSeparator и autoGroup.

Inputmask("numeric", {
  autoGroup: true,
  groupSeparator: ",",
  digits: 0
}).mask(inputElement);

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

  • 1000 → 1,000
  • 1000000 → 1,000,000

Дополнительно используется параметр groupSize, определяющий размер группы разрядов:

Inputmask("numeric", {
  autoGroup: true,
  groupSeparator: " ",
  groupSize: 3
}).mask(inputElement);

Отрицательные значения и знаковая логика

Поддержка отрицательных чисел контролируется параметром allowMinus. При включении допускается ввод символа -.

Inputmask("decimal", {
  allowMinus: true
}).mask(inputElement);

Дополнительно учитываются следующие аспекты:

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

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

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

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

Поведение при выходе за пределы:

  • значение корректируется при потере фокуса;
  • либо блокируется ввод, если превышение происходит в процессе набора;
  • зависит от версии и конфигурации поведения greedy и enforceMinMax.

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

Параметр radixPoint определяет символ, используемый для отделения дробной части:

Inputmask("decimal", {
  radixPoint: ","
}).mask(inputElement);

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

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

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

Необязательная дробная часть

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

Inputmask("decimal", {
  digits: 2,
  digitsOptional: true
}).mask(inputElement);

Поведение:

  • ввод 10 остаётся допустимым;
  • ввод 10.5 нормализуется до 10.50;
  • при отсутствии дробной части форматирование добавляет нули при необходимости.

Выравнивание и визуальное поведение

Параметр rightAlign влияет на позиционирование значения внутри поля ввода.

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

Варианты:

  • true — значение визуально прижато к правому краю;
  • false — стандартное левое выравнивание.

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

Форматирование валютных значений

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

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

Пример конфигурации:

Inputmask("decimal", {
  digits: 2,
  groupSeparator: " ",
  autoGroup: true,
  radixPoint: "."
}).mask(inputElement);

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

Поведение при вводе и нормализация

Числовые маски реализуют постсимвольную нормализацию:

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

В процессе ввода значение может временно находиться в промежуточном состоянии, но при завершении редактирования приводится к каноническому виду.

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

Пустые значения и нули имеют отдельную семантику:

  • пустое поле может интерпретироваться как null или "";
  • значение 0 сохраняется как валидное числовое значение;
  • поведение зависит от параметра clearMaskOnLostFocus.

Пример:

Inputmask("numeric", {
  clearMaskOnLostFocus: true
}).mask(inputElement);

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

Числовые маски используют пошаговую проверку ввода:

  • проверка символа на допустимость;
  • проверка позиции относительно знака и разделителя;
  • проверка соответствия ограничениям digits, min, max;
  • нормализация отображения.

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

Совместное использование параметров

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

Inputmask("decimal", {
  digits: 3,
  digitsOptional: true,
  allowMinus: true,
  groupSeparator: ",",
  autoGroup: true,
  radixPoint: ".",
  rightAlign: false,
  min: -1000,
  max: 1000
}).mask(inputElement);

Подобная конфигурация охватывает:

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

Поведение при программном изменении значения

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

  • строка прогоняется через парсер Inputmask;
  • применяются правила форматирования;
  • результат синхронизируется с DOM-элементом;
  • внутреннее состояние маски обновляется.
inputElement.inputmask.setValue("12345.6");

Совместимость с локализацией

Числовые маски учитывают региональные особенности:

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

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

Оглавление