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

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

Основная конфигурация:

new AutoNumeric('#negativeOnlyInput', {
    minimumValue: '-999999999', // нижняя граница
    maximumValue: '-0.01',      // верхняя граница (не включая 0)
    decimalPlaces: 2,           // количество знаков после запятой
    allowDecimalPadding: true,  // принудительное добавление нулей
    negativePositiveSignPlacement: 'l', // знак минус слева
});
  • minimumValue задаёт минимально допустимое число. Для отрицательных значений оно всегда должно быть меньше нуля.
  • maximumValue ограничивает верхнюю границу. В режиме только отрицательных чисел чаще всего ставится чуть меньше нуля (-0.01), чтобы исключить возможность ввода нуля или положительных чисел.
  • decimalPlaces контролирует точность. Для финансовых операций обычно используется 2 знака после запятой.
  • allowDecimalPadding гарантирует единообразие отображения десятичных разрядов, добавляя недостающие нули.
  • negativePositiveSignPlacement определяет позицию знака минус. Значение 'l' ставит знак слева от числа, 'r' – справа.

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

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

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

new AutoNumeric('#negativeOnlyInput', {
    minimumValue: '-1000',
    maximumValue: '-0.01',
    emptyInputBehavior: 'null', // очищает поле при недопустимом вводе
});

Особенности работы с клавиатурой:

  • Ввод через цифровую клавиатуру блокируется автоматически при попытке ввести положительное число.
  • Символ - допускается только в начале строки.
  • Копирование и вставка положительных значений также корректируется: AutoNumeric преобразует их в допустимый диапазон или очищает поле, если значение невозможно привести к отрицательному.

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

При отображении отрицательных чисел AutoNumeric предоставляет гибкие возможности форматирования:

  • Разделитель тысяч: digitGroupSeparator: ',' для привычного разделения тысячных.
  • Отображение валюты: currencySymbol: '$', currencySymbolPlacement: 'p' для позиционирования перед числом.
  • Автоматическое приведение к отрицательному: при вводе положительного числа с клавиатуры можно настроить modifyValueOnWheel: true для корректировки значения колесиком мыши или стрелками вверх/вниз.
new AutoNumeric('#negativeCurrency', {
    minimumValue: '-1000000',
    maximumValue: '-0.01',
    digitGroupSeparator: ',',
    decimalPlaces: 2,
    currencySymbol: '$',
    currencySymbolPlacement: 'p',
    modifyValueOnWheel: true,
});

Работа с событиями

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

  • onValid — вызывается при корректном вводе отрицательного числа.
  • onInvalid — срабатывает, если введено положительное число или значение выходит за пределы диапазона.
  • onFocus / onBlur — можно реализовать визуальную подсветку поля при фокусе или очистку при уходе фокуса.

Пример обработки событий:

const negativeInput = new AutoNumeric('#negativeOnlyInput', {
    minimumValue: '-500',
    maximumValue: '-0.01',
});

negativeInput.inputElement.addEventListener('input', () => {
    const currentValue = negativeInput.getNumber();
    console.log('Текущее отрицательное значение:', currentValue);
});

Интеграция с формами и отправка данных

При использовании режима только отрицательных чисел важно правильно интегрировать AutoNumeric с HTML-формами:

  • Метод getNumber() возвращает чистое числовое значение без форматирования.
  • Метод getFormatted() возвращает строку с применением всех визуальных настроек.
  • Перед отправкой формы рекомендуется использовать getNumber() для корректной передачи на сервер.
const form = document.querySelector('#myForm');
form.addEventListener('submit', (e) => {
    e.preventDefault();
    const value = negativeInput.getNumber();
    console.log('Отправляемое значение:', value);
    // здесь можно отправлять value на сервер
});

Практические рекомендации

  • Всегда указывать максимальное и минимальное значения, чтобы исключить ввод нуля или положительных чисел.
  • Использовать события onInvalid для пользовательской обратной связи, например, подсветки поля красным.
  • Сохранять числовой формат при отправке на сервер через getNumber(), избегая ошибок парсинга на серверной стороне.
  • Комбинировать с форматированием валюты и разделителем тысяч, если необходимо отображать финансовые данные.

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

Оглавление