Режим процентов

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

Инициализация процентного поля

Для настройки поля в режиме процентов используется опция style со значением 'percentage' либо установка соответствующих параметров напрямую:

new AutoNumeric('#percentInput', {
    decimalPlaces: 2,
    minimumValue: '0',
    maximumValue: '100',
    suffixText: '%',
    modifyValueOnWheel: true,
});

Ключевые моменты:

  • decimalPlaces определяет количество знаков после запятой.
  • minimumValue и maximumValue позволяют ограничить диапазон допустимых значений.
  • suffixText добавляет символ % в конце поля.
  • modifyValueOnWheel включает изменение значения при прокрутке колеса мыши.

Автоматическое преобразование и хранение

AutoNumeric позволяет вводить процент как целое число или дробное, автоматически конвертируя его в корректное числовое значение. Например, при вводе 50 поле может отобразить 50%, а внутреннее значение останется 50. При вычислениях важно использовать метод .getNumber() для получения числового представления без символа %:

const percentValue = AutoNumeric.getAutoNumericElement('#percentInput').getNumber();
console.log(percentValue); // 50

Метод .getNumericString() возвращает строковое значение без форматирования, что удобно для передачи на сервер.

Ввод и редактирование

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

  • Преобразует запятую в точку в качестве десятичного разделителя.
  • Запрещает ввод недопустимых символов, включая буквы и спецсимволы, кроме % при необходимости.
  • Поддерживает динамическое изменение значения через клавиши стрелка вверх/вниз или колесо мыши, учитывая текущие настройки increment.
new AutoNumeric('#percentInput', {
    decimalPlaces: 1,
    step: 0.5,
});

В данном примере нажатие стрелки вверх увеличивает значение на 0.5%.

Форматирование при потере фокуса и получении фокуса

AutoNumeric позволяет разделять отображение значения при фокусе и при потере фокуса. В процентном режиме это особенно полезно для упрощения редактирования:

new AutoNumeric('#percentInput', {
    decimalPlaces: 2,
    suffixText: '%',
    unformatOnHover: true,
});
  • При фокусе поле показывает «чистое» число без лишнего форматирования.
  • При потере фокуса добавляется символ % и применяется округление по decimalPlaces.

Локализация и разделители

Для корректного отображения процентов в разных локалях используется параметр digitGroupSeparator и decimalCharacter:

new AutoNumeric('#percentInput', {
    decimalPlaces: 2,
    digitGroupSeparator: ' ',
    decimalCharacter: ',',
    suffixText: '%',
});

Результат: 12 345,67%. Это особенно важно при интеграции с интерфейсами, ориентированными на локальные стандарты числового форматирования.

Настройка поведения при переполнении

AutoNumeric позволяет задать строгие границы значений и способы обработки переполнения:

new AutoNumeric('#percentInput', {
    minimumValue: '0',
    maximumValue: '100',
    clampValue: true,
});

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

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

Параметры процентного поля можно менять после инициализации через методы .update(), .set(), .setOptions(). Например, для изменения диапазона значений:

const anElement = new AutoNumeric('#percentInput');
anElement.update({ maximumValue: '200' });
anElement.set(150); // корректно отображается как 150%

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

В процентном режиме AutoNumeric обеспечивает совместимость с HTML-формами: при отправке формы значение можно получить через .getNumber() или использовать form.submit() без потери форматирования.

const formData = new FormData(document.querySelector('#myForm'));
const percentValue = anElement.getNumber();
formData.set('percentField', percentValue);

Это гарантирует, что сервер получит точное числовое значение, а не строку с символом %.

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

Для процентных полей допускается конфигурация отрицательных значений:

new AutoNumeric('#percentInput', {
    allowNegative: true,
    minimumValue: '-50',
    maximumValue: '100',
});
  • Значения меньше 0 будут отображаться с минусом.
  • Нулевое значение корректно форматируется как 0%.

Поддержка вычислений и интеграции

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

const taxRate = anElement.getNumber(); // 18
const price = 1000;
const tax = price * (taxRate / 100); // 180

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

События и кастомизация

AutoNumeric предоставляет события, позволяющие реагировать на изменения:

anElement.domElement.addEventListener('autoNumeric:rawValueModified', (e) => {
    console.log('Новое значение без форматирования:', e.detail.newRawValue);
});

Это открывает возможности для интеграции с динамическими интерфейсами и расчетами в реальном времени.

Резюме ключевых возможностей процентного режима

  • Автоматическое форматирование с символом %.
  • Точное хранение числового значения.
  • Поддержка локализации и разделителей.
  • Ограничение диапазона значений и обработка переполнения.
  • Удобное редактирование при фокусе и потеря фокуса.
  • Интеграция с формами и вычислениями.
  • Полная поддержка событий для динамического взаимодействия.

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

Оглавление