Инициализация через селекторы

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

Использование CSS-селекторов

Для инициализации AutoNumeric через селекторы применяется статический метод AutoNumeric.multiple. Этот метод принимает два основных аргумента:

  1. Селектор – строка, содержащая CSS-селектор, который выбирает все нужные элементы на странице.
  2. Настройки – объект конфигурации с параметрами форматирования.

Пример базовой инициализации нескольких полей с помощью класса numeric:

AutoNumeric.multiple('.numeric', {
    digitGroupSeparator: ',',
    decimalCharacter: '.',
    decimalPlaces: 2,
    currencySymbol: '$',
    currencySymbolPlacement: 'p'
});

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

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

AutoNumeric позволяет использовать:

  • Классы: .className
  • ID: #elementId
  • Атрибуты: [data-type="currency"]
  • Комбинированные селекторы: .class1, .class2, #id1, [data-type="number"]

Пример комбинированной инициализации:

AutoNumeric.multiple('.price, .tax, [data-type="amount"]', {
    decimalPlaces: 0,
    digitGroupSeparator: ' ',
    modifyValueOnWheel: true
});

Здесь все элементы с классами price и tax, а также элементы с атрибутом data-type="amount", будут отформатированы с пробелами как разделителями тысяч и без десятичных знаков. Опция modifyValueOnWheel позволяет изменять значение при прокрутке колесика мыши.

Особенности инициализации через селекторы

  • Мгновенное применение: при вызове AutoNumeric.multiple форматирование применяется ко всем выбранным элементам сразу.
  • Автоматическое связывание: каждый элемент получает внутренний объект AutoNumeric, доступный через AutoNumeric.getAutoNumericElement. Это позволяет работать с отдельными экземплярами, например, получать или изменять значения динамически.
  • Обновление и пересоздание: при необходимости изменить конфигурацию для группы элементов можно сначала удалить существующую инициализацию с помощью метода AutoNumeric.remove и затем заново вызвать AutoNumeric.multiple с новыми настройками.

Пример изменения конфигурации для группы элементов:

const elements = document.querySelectorAll('.numeric');
elements.forEach(el => AutoNumeric.remove(el));

AutoNumeric.multiple('.numeric', {
    decimalPlaces: 3,
    decimalCharacter: ',',
    digitGroupSeparator: '.'
});

В данном примере предыдущие настройки удаляются, и для всех элементов с классом numeric применяется новая конфигурация с точкой как разделителем тысяч и запятой для десятичных знаков.

Доступ к отдельным экземплярам

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

const anElement = AutoNumeric.getAutoNumericElement(document.querySelector('#price'));
console.log(anElement.getNumber()); // Получение числового значения
anElement.set(12345.67);           // Установка нового значения

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

Совместное использование с динамически добавленными элементами

При добавлении элементов на страницу после инициализации группы, новые элементы необходимо инициализировать отдельно. Это делается с помощью того же метода AutoNumeric.multiple, либо через конструктор new AutoNumeric(element, options) для одного элемента.

Пример динамической инициализации:

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

AutoNumeric.multiple('.numeric', {
    decimalPlaces: 2,
    digitGroupSeparator: ','
});

Рекомендации по селекторам

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

Применение кастомных атрибутов

AutoNumeric позволяет использовать data-атрибуты для хранения настроек форматирования прямо в HTML. В сочетании с селекторами это дает возможность гибко управлять различными типами числовых полей:

<input class="numeric" data-decimal-places="0" data-digit-group-separator=" ">
<input class="numeric" data-decimal-places="2" data-digit-group-separator="," data-currency-symbol="$">

Инициализация через селектор с учётом data-атрибутов:

AutoNumeric.multiple('.numeric', {
    decimalPlaces: AutoNumeric.options.decimalPlaces,
    digitGroupSeparator: AutoNumeric.options.digitGroupSeparator,
    currencySymbol: AutoNumeric.options.currencySymbol
});

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

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

Оглавление