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

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

Основой работы с десятичными значениями выступает конфигурация:

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

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

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

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

Разделитель целой и дробной части (radixPoint)

Ключевой параметр десятичной маски — radixPoint, определяющий символ отделения дробной части.

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

Возможные варианты:

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

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

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

Управление количеством знаков (digits)

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

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

Поведение:

  • digits: 0 — дробная часть запрещена;
  • digits: 2 — строго две цифры после разделителя;
  • digits: 3+ — фиксированное расширение точности.

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

Необязательные знаки (digitsOptional)

Параметр digitsOptional изменяет строгость контроля дробной части:

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

Логика:

  • false — дробная часть обязательна до заданной длины;
  • true — дробная часть допускается, но не является обязательной.

При включённом режиме допускается ввод как 12, так и 12.3 или 12.34.

Группировка разрядов (groupSeparator и autoGroup)

Форматирование больших чисел обеспечивается параметрами groupSeparator и autoGroup.

Inputmask("decimal", {
  groupSeparator: " ",
  autoGroup: true
}).mask(input);

Поведение:

  • groupSeparator задаёт символ разделения разрядов;
  • autoGroup: true включает автоматическое добавление разделителей.

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

1000000 → 1 000 000

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

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

Группировка применяется только к целой части числа и пересчитывается динамически при вводе.

Поддержка отрицательных значений (allowMinus)

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

Особенности:

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

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

Выравнивание и отображение (rightAlign)

Inputmask("decimal", {
  rightAlign: true
}).mask(input);

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

Характеристики:

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

При false ввод ведётся слева направо без дополнительного смещения.

Форматирование и локализация разделителей

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

Пример европейского формата:

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

Результат:

1234567,89 → 1.234.567,89

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

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

При вводе символы проходят несколько этапов обработки:

  1. Перехват символа клавиатуры;
  2. Проверка допустимости (цифры, знак, разделитель);
  3. Нормализация разделителя дробной части;
  4. Пересчёт групп разрядов;
  5. Перерисовка значения в поле.

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

Удаление маски при получении значения (unmasking)

Для получения чистого числового значения используется механизм unmask:

Inputmask("decimal", {
  digits: 2
}).unmaskedvalue(input);

Результат:

  • из 1 234,56 получается 1234.56 (в зависимости от конфигурации radixPoint);
  • разделители групп полностью удаляются;
  • нормализуется десятичный разделитель.

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

removeMaskOnSubmit: true

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

numericInput и особенности обратного порядка

Inputmask("decimal", {
  numericInput: true
}).mask(input);

Режим numericInput изменяет поведение ввода:

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

При выключенном режиме ввод ведётся стандартно, слева направо.

Обработка неполных значений

В процессе ввода допускаются промежуточные состояния:

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

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

Ограничения и контроль точности

Комбинация digits, digitsOptional и radixPoint формирует строгую модель контроля точности:

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

Пример строгого денежного поля:

Inputmask("decimal", {
  digits: 2,
  digitsOptional: false,
  allowMinus: false,
  groupSeparator: " ",
  autoGroup: true
}).mask(input);

Такое сочетание гарантирует единый формат значений на уровне интерфейса.

Взаимодействие с другими параметрами Inputmask

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

  • placeholder — отображение шаблона числа;
  • clearIncomplete — очистка незавершённых значений;
  • showMaskOnHover — отображение маски при наведении;
  • onBeforeMask — предварительная обработка входных данных.

Пример предварительной нормализации:

Inputmask("decimal", {
  onBeforeMask: function (value) {
    return value.replace(",", ".");
  }
}).mask(input);

Такой механизм полезен при работе с неоднородными источниками данных.

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

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

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

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

Итоговая модель обработки десятичных чисел

Внутренняя логика Inputmask для decimal основана на следующих принципах:

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

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

Оглавление