Инициализация на элементе input

Инициализация AutoNumeric на HTML-элементе input позволяет автоматически форматировать вводимые пользователем числовые значения, учитывая локаль, разделители тысяч, десятичные знаки, валютные символы и дополнительные ограничения. Этот процесс является фундаментальным для использования библиотеки, так как без него функции автоподстановки и форматирования не будут работать.

Подключение к элементу input

Для начала необходимо выбрать элемент input с помощью стандартных методов DOM, таких как document.querySelector или document.getElementById. AutoNumeric работает как с одиночными элементами, так и с коллекциями элементов.

Пример инициализации на одном элементе:

const inputElement = document.querySelector('#price');
new AutoNumeric(inputElement, {
    digitGroupSeparator: ',',
    decimalCharacter: '.',
    decimalPlaces: 2,
    currencySymbol: '$',
    currencySymbolPlacement: 'p' // 'p' – перед числом, 's' – после
});

Здесь:

  • digitGroupSeparator — символ, используемый для разделения тысяч;
  • decimalCharacter — символ десятичного разделителя;
  • decimalPlaces — количество знаков после запятой;
  • currencySymbol — символ валюты;
  • currencySymbolPlacement — положение валютного символа относительно числа.

Инициализация нескольких элементов

AutoNumeric позволяет инициализировать несколько input-элементов одновременно, используя селекторы CSS и метод forEach. Это упрощает работу с формами, где необходимо единообразное форматирование чисел.

const inputs = document.querySelectorAll('.currency-input');
inputs.forEach(input => {
    new AutoNumeric(input, {
        digitGroupSeparator: ' ',
        decimalCharacter: ',',
        decimalPlaces: 0,
        currencySymbol: '€',
        currencySymbolPlacement: 's'
    });
});

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

Использование предустановок (presets)

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

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

new AutoNumeric('#amount', AutoNumeric.getPredefinedOptions().currency);

Предустановка currency автоматически задаёт:

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

Настройка минимальных и максимальных значений

При инициализации можно задать ограничения на вводимые значения:

new AutoNumeric('#quantity', {
    minimumValue: '0',
    maximumValue: '1000',
    decimalPlaces: 0,
    digitGroupSeparator: ''
});

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

Обработка событий на элементе

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

const numericInput = new AutoNumeric('#tax', { decimalPlaces: 2 });

numericInput.node().addEventListener('focus', () => {
    console.log('Элемент получил фокус');
});

numericInput.node().addEventListener('blur', () => {
    console.log('Текущее значение:', numericInput.getNumber());
});

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

Инициализация с динамическими элементами

Если элементы input добавляются в DOM динамически, необходимо инициализировать AutoNumeric после добавления элемента:

const newInput = document.createElement('input');
document.body.appendChild(newInput);

new AutoNumeric(newInput, {
    decimalPlaces: 2,
    digitGroupSeparator: ','
});

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

Ключевые методы экземпляра AutoNumeric

После инициализации каждый элемент управляется своим экземпляром AutoNumeric. Основные методы:

  • getNumber() — возвращает числовое значение;
  • set(number) — задаёт значение программно;
  • update(settings) — обновляет параметры форматирования на лету;
  • remove() — удаляет AutoNumeric с элемента, возвращая обычное поведение input.

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

const priceInput = new AutoNumeric('#price', { decimalPlaces: 2 });
priceInput.update({ decimalPlaces: 4 });

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

  • Всегда сохранять ссылки на экземпляры AutoNumeric, особенно если требуется дальнейшее управление значениями.
  • Использовать предустановки там, где возможно, чтобы обеспечить единообразие форматов.
  • Для форм с большим количеством полей инициализировать элементы через циклы или делегирование событий.
  • Обращать внимание на локализацию чисел: decimalCharacter и digitGroupSeparator должны соответствовать региональным стандартам.

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

Оглавление