Режим целых чисел

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

Важные параметры конфигурации режима целых чисел:

  • decimalPlaces: задается значение 0. Это гарантирует, что дробная часть всегда отсутствует.
  • digitGroupSeparator: позволяет задавать разделитель тысяч для удобного чтения больших чисел. Например, пробел или запятая.
  • allowNegative: контролирует возможность ввода отрицательных чисел. Значение true разрешает отрицательные числа, false блокирует.
  • minimumValue и maximumValue: определяют диапазон допустимых значений. Например, minimumValue: "0" ограничит ввод только положительными числами.

Пример инициализации поля для целых чисел с разделителем тысяч:

new AutoNumeric('#integerInput', {
    decimalPlaces: 0,
    digitGroupSeparator: ' ',
    allowNegative: true,
    minimumValue: '-1000',
    maximumValue: '1000'
});

Форматирование и отображение

AutoNumeric автоматически форматирует ввод пользователя при потере фокуса. Например, если пользователь вводит 1234, после выхода из поля значение преобразуется в 1 234 при установленном разделителе тысяч.

Особенности форматирования:

  • Удаление лишних нулей: ведущие нули автоматически убираются.
  • Группировка цифр: большие числа становятся удобочитаемыми, например 1000000 → 1 000 000.
  • Отрицательные числа: отображаются согласно установленным правилам (- перед числом или скобки при специфических настройках).

Валидация ввода

AutoNumeric обеспечивает защиту от некорректного ввода на лету. При включенном режиме целых чисел:

  • Ввод десятичной точки блокируется.
  • Символы, не являющиеся цифрами, автоматически удаляются.
  • При превышении maximumValue значение корректируется на допустимый максимум, аналогично для minimumValue.

Пример валидации:

const anInteger = new AutoNumeric('#integerInput', {
    decimalPlaces: 0,
    allowNegative: false,
    minimumValue: '0',
    maximumValue: '5000'
});

// Программная проверка текущего значения
console.log(anInteger.getNumber()); // Вернет число типа Number

Работа с отрицательными числами

Если allowNegative: true, пользователь может вводить отрицательные значения. AutoNumeric корректно обрабатывает:

  • Ввод знака минус в начале числа.
  • Перенос знака при редактировании, например, при вставке текста.
  • Форматирование после потери фокуса, сохраняя отрицательность числа.

Пример:

new AutoNumeric('#negativeInteger', {
    decimalPlaces: 0,
    allowNegative: true,
    minimumValue: '-9999',
    maximumValue: '9999'
});

События и взаимодействие с другими скриптами

Режим целых чисел полностью поддерживает стандартные события AutoNumeric:

  • autoNumeric:preSet – вызывается перед программной установкой нового значения.
  • autoNumeric:postSet – после установки значения.
  • autoNumeric:invalid – при попытке ввести недопустимое значение.

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

const an = new AutoNumeric('#integerInput', { decimalPlaces: 0 });

an.domElement.addEventListener('autoNumeric:invalid', function(e) {
    console.warn('Введено недопустимое значение:', e.detail.newValue);
});

Программное управление значением

AutoNumeric предоставляет методы для работы с числами в режиме целых чисел:

  • set(value) – устанавливает новое значение.
  • getNumber() – возвращает значение как тип Number.
  • getFormatted() – возвращает форматированное строковое значение с разделителями тысяч.
  • update(settings) – динамически меняет настройки после инициализации.

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

an.update({
    minimumValue: '10',
    maximumValue: '1000'
});

Особенности UX при вводе

  • Автофокус и выделение: при фокусе поле может выделять текущее значение целиком или только число, оставляя разделители.
  • Плавное редактирование: вставка, удаление и перемещение курсора обрабатываются без разрушения форматирования.
  • Совместимость с клавиатурными навигациями: стрелки, Backspace и Delete работают ожидаемым образом, даже при использовании разделителей тысяч.

Настройка локализации

Режим целых чисел поддерживает локальные стандарты:

  • Разделитель тысяч (digitGroupSeparator) можно выбрать в зависимости от региона: пробел, запятая, точка.
  • Позиция отрицательного знака может изменяться с помощью negativePositiveSignPlacement.

Пример настройки под европейский стандарт:

new AutoNumeric('#integerInput', {
    decimalPlaces: 0,
    digitGroupSeparator: '.',
    allowNegative: true,
    negativePositiveSignPlacement: 'l' // знак слева
});

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

Оглавление