Что такое AutoNumeric

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

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

Инициализация и базовое использование

Для подключения AutoNumeric необходимо добавить библиотеку в проект через CDN или пакетный менеджер (npm/yarn). После подключения форматирование полей ввода производится через создание экземпляра AutoNumeric для конкретного элемента:

import AutoNumeric from 'autonumeric';

const inputElement = document.querySelector('#myInput');
new AutoNumeric(inputElement, {
    digitGroupSeparator: ',',
    decimalCharacter: '.',
    decimalPlaces: 2,
    currencySymbol: '$',
    currencySymbolPlacement: 'p'
});

Ключевые параметры:

  • digitGroupSeparator — символ разделителя тысяч (например, запятая или пробел).
  • decimalCharacter — символ десятичного разделителя.
  • decimalPlaces — количество знаков после запятой.
  • currencySymbol — символ валюты.
  • currencySymbolPlacement — положение символа валюты ('p' перед числом, 's' после числа).

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

Настройка форматов чисел

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

  • Проценты:
new AutoNumeric('#percentInput', { 
    suffixText: '%', 
    decimalPlaces: 1 
});

Это позволяет вводить значения в процентах, автоматически добавляя знак % и контролируя количество знаков после запятой.

  • Денежные значения:
new AutoNumeric('#moneyInput', {
    currencySymbol: '€',
    currencySymbolPlacement: 's',
    digitGroupSeparator: '.',
    decimalCharacter: ',',
    decimalPlaces: 2
});

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

  • Числовые диапазоны:
new AutoNumeric('#rangeInput', {
    minimumValue: '0',
    maximumValue: '1000'
});

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

Работа с API AutoNumeric

AutoNumeric предоставляет богатое программное API для управления полями и их значениями:

  • Получение числового значения без форматирования:
const numericValue = AutoNumeric.getNumber('#myInput');

Возвращается значение типа number, что удобно для дальнейших вычислений.

  • Изменение формата динамически:
const anElement = new AutoNumeric('#myInput', { decimalPlaces: 2 });
anElement.update({ decimalPlaces: 4 });

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

  • Сброс форматирования и очистка поля:
anElement.clear();

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

Поддержка локализации

AutoNumeric учитывает локальные стандарты числового форматирования, включая:

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

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

Валидация и обработка ошибок

Библиотека автоматически предотвращает некорректный ввод:

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

Кроме того, AutoNumeric поддерживает события изменения значения:

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

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

Масштабирование и производительность

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

Для динамически создаваемых элементов можно использовать делегирование или повторную инициализацию:

document.querySelectorAll('.dynamic-input').forEach(el => {
    new AutoNumeric(el, { decimalPlaces: 2 });
});

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

Расширенные возможности

  • Форматирование чисел с отрицательными значениями: поддержка скобок для отрицательных чисел (1,234.56) или знака -.
  • Поддержка вычислений при вводе: возможность получать числовое значение для дальнейшей арифметики без ручного удаления форматирования.
  • Гибкая настройка событий: возможность отслеживать ввод пользователя и динамически изменять формат или значение.

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

Оглавление