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

Выход за границы возникает в нескольких сценариях:

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

Без контроля диапазона возникают ошибки:

• отрицательная сумма платежа;
• процент выше 100%;
• количество товаров меньше нуля;
• финансовые значения, превышающие допустимые лимиты;
• потеря точности при экстремально больших числах.

---

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

Основой механизма являются два параметра:

new AutoNumeric('#price', {
    minimumValue: '0',
    maximumValue: '100000'
});

В этом примере:

• минимальное значение — 0;
• максимальное значение — 100000.

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

---

Поведение при ручном вводе

Превышение максимального значения

new AutoNumeric('#amount', {
    maximumValue: '5000'
});

Если пользователь вводит:

7000

то библиотека:

• может запретить ввод;
• может скорректировать значение;
• может временно разрешить ввод до потери фокуса.

Поведение зависит от дополнительных настроек.

---

Значение меньше минимального

new AutoNumeric('#quantity', {
    minimumValue: '1'
});

Попытка ввода:

0

или:

-5

приведёт к отклонению значения.

---

Свойство overrideMinMaxLimits

Параметр overrideMinMaxLimits определяет стратегию поведения при выходе за диапазон.

Основные режимы

overrideMinMaxLimits: 'ceiling'

или:

overrideMinMaxLimits: 'floor'

или:

overrideMinMaxLimits: 'ignore'

или:

overrideMinMaxLimits: 'invalid'

Каждый режим реализует собственную логику обработки.

---

Режим ceiling

Режим ceiling ограничивает значения верхней границей.

new AutoNumeric('#salary', {
    minimumValue: '0',
    maximumValue: '10000',
    overrideMinMaxLimits: 'ceiling'
});

Если вводится:

15000

то итоговое значение автоматически станет:

10000

Это особенно полезно:

• в финансовых формах;
• при ограничении процентов;
• при контроле лимитов;
• в системах расчёта бонусов.

---

Режим floor

Режим floor принудительно удерживает значение выше минимальной границы.

new AutoNumeric('#discount', {
    minimumValue: '0',
    maximumValue: '100',
    overrideMinMaxLimits: 'floor'
});

Попытка установить:

-20

даст результат:

0

---

Комбинированная логика floor и ceiling

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

new AutoNumeric('#percent', {
    minimumValue: '0',
    maximumValue: '100',
    overrideMinMaxLimits: 'ceiling'
});

Результаты:

Ввод	Итог
120	100
1500	100
-5	0

---

Режим ignore

Режим ignore отключает принудительное исправление.

new AutoNumeric('#value', {
    minimumValue: '0',
    maximumValue: '100',
    overrideMinMaxLimits: 'ignore'
});

Пользователь может временно вводить:

200

или:

-50

При этом:

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

Подход полезен:

• в сложных формах;
• при серверной валидации;
• в многоэтапных интерфейсах;
• при использовании внешних валидаторов.

---

Режим invalid

Режим invalid помечает выход за диапазон как ошибочное состояние.

new AutoNumeric('#score', {
    minimumValue: '0',
    maximumValue: '10',
    overrideMinMaxLimits: 'invalid'
});

Значение:

15

не будет автоматически исправлено.

Поле сохранит некорректное состояние до исправления пользователем.

---

Проверка диапазона при потере фокуса

AutoNumeric активно использует событие blur.

Последовательность работы:

1. Пользователь вводит значение.
2. Поле временно принимает данные.
3. После потери фокуса запускается проверка.
4. Библиотека исправляет либо отклоняет значение.

Пример:

new AutoNumeric('#price', {
    minimumValue: '0',
    maximumValue: '1000'
});

Пользователь вводит:

5000

После blur поле автоматически изменится на:

1000

---

Особенности промежуточного ввода

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

Например:

-

или:

0.

или:

0001

Библиотека учитывает:

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

Это предотвращает “ломание” ввода.

---

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

Полный запрет отрицательных чисел

new AutoNumeric('#sum', {
    minimumValue: '0'
});

Теперь:

-1

невозможно установить.

---

Разрешение отрицательных значений

new AutoNumeric('#temperature', {
    minimumValue: '-100',
    maximumValue: '100'
});

Диапазон становится симметричным.

---

Ограничение процентов

Одна из самых частых задач.

new AutoNumeric('#percent', {
    minimumValue: '0',
    maximumValue: '100',
    suffixText: '%'
});

Теперь невозможно:

• установить процент выше 100;
• указать отрицательное значение.

---

Ограничение денежных значений

new AutoNumeric('#money', {
    minimumValue: '0',
    maximumValue: '1000000',
    currencySymbol: '$'
});

Такая конфигурация защищает систему от:

• переполнения;
• ошибочных сумм;
• аномально больших чисел.

---

Обработка выхода за диапазон при вставке

Пользователь может вставить:

999999999

через Ctrl+V.

AutoNumeric проверяет диапазон и применяет те же правила, что и при ручном вводе.

---

Программная установка значений

Метод set()

const an = new AutoNumeric('#field', {
    minimumValue: '0',
    maximumValue: '100'
});

an.set(500);

Библиотека проверит диапазон автоматически.

---

Установка некорректного значения

an.set(1000);

Результат зависит от:

overrideMinMaxLimits

---

Получение информации о диапазоне

Чтение настроек

const settings = an.getSettings();

console.log(settings.minimumValue);
console.log(settings.maximumValue);

---

Динамическое изменение диапазона

Иногда границы должны изменяться во время работы приложения.

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

После вызова:

update()

новые ограничения применяются немедленно.

---

Зависимые диапазоны

Частый сценарий — связь двух полей.

Например:

• минимальная цена;
• максимальная цена.

const minField = new AutoNumeric('#min');
const maxField = new AutoNumeric('#max');

minField.node().addEventListener('change', () => {
    maxField.update({
        minimumValue: minField.getNumericString()
    });
});

Теперь максимальное значение не сможет быть меньше минимального.

---

Ограничение длины числа

Хотя maximumValue формально отвечает за диапазон, он также ограничивает размер числа.

maximumValue: '999999'

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

1000000

---

Работа с дробными числами

Ограничение дробных значений

new AutoNumeric('#decimal', {
    minimumValue: '0',
    maximumValue: '10.5'
});

Допустимые значения:

0
5.25
10.5

Недопустимые:

10.6
11

---

Проблемы точности

JavaScript использует тип Number, что может вызывать ошибки:

0.1 + 0.2

результат:

0.30000000000000004

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

---

Ограничение больших чисел

new AutoNumeric('#big', {
    maximumValue: '999999999999999.99'
});

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

---

Ошибки конфигурации диапазона

Минимум больше максимума

Некорректная конфигурация:

new AutoNumeric('#field', {
    minimumValue: '100',
    maximumValue: '10'
});

Такой диапазон невозможен.

AutoNumeric выдаёт ошибку и блокирует работу экземпляра.

---

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

Метод isWithinRange()

Некоторые версии и расширения AutoNumeric позволяют проверять диапазон отдельно.

Пример логики:

const value = an.getNumber();

if (value >= 0 && value <= 100) {
    console.log('OK');
}

---

Пользовательские сообщения об ошибках

AutoNumeric отвечает только за форматирование и ограничения. Текст ошибок обычно реализуется отдельно.

input.addEventListener('change', () => {
    const value = an.getNumber();

    if (value > 100) {
        error.textContent = 'Значение превышает лимит';
    }
});

---

Интеграция с HTML-валидацией

AutoNumeric может работать совместно с:

• min;
• max;
• required;
• пользовательскими валидаторами.

Пример:

<input
    id="age"
    type="text"
    min="18"
    max="99">

new AutoNumeric('#age', {
    minimumValue: '18',
    maximumValue: '99'
});

---

Работа в React

new AutoNumeric(inputRef.current, {
    minimumValue: '0',
    maximumValue: '1000'
});

При обновлении состояния важно синхронизировать:

• React state;
• внутреннее состояние AutoNumeric;
• ограничения диапазона.

---

Работа в Vue

mounted() {
    this.an = new AutoNumeric(this.$refs.input, {
        minimumValue: '0',
        maximumValue: '100'
    });
}

---

Работа в Angular

new AutoNumeric(element, {
    minimumValue: '0',
    maximumValue: '10000'
});

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

---

Производительность при сложных диапазонах

Большое количество полей с динамическими диапазонами может влиять на производительность:

• постоянные проверки;
• обновления DOM;
• перерасчёт форматирования;
• события ввода.

Оптимизации:

• минимизация вызовов update();
• пакетное обновление;
• дебаунс событий;
• ограничение лишних ререндеров.

---

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

new AutoNumeric('#credit', {
    currencySymbol: '$',
    decimalPlaces: 2,
    minimumValue: '1000',
    maximumValue: '500000',
    overrideMinMaxLimits: 'ceiling'
});

Поведение:

Ввод	Результат
500	1000
10000	10000
900000	500000

---

Практический пример возраста

new AutoNumeric('#age', {
    decimalPlaces: 0,
    minimumValue: '0',
    maximumValue: '120'
});

Исключаются:

• отрицательный возраст;
• дробные значения;
• нереалистичные числа.

---

Практический пример рейтинга

new AutoNumeric('#rating', {
    decimalPlaces: 1,
    minimumValue: '0',
    maximumValue: '5'
});

Допустимые значения:

4.5
3.7
5.0

Недопустимые:

5.5
10