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

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

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

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

Пример:

// Выбор всех input с классом "currency"
const currencyFields = document.querySelectorAll('.currency');

// Инициализация всех выбранных полей с одинаковыми настройками
currencyFields.forEach(input => {
  new AutoNumeric(input, {
    currencySymbol: '$',
    decimalCharacter: '.',
    digitGroupSeparator: ',',
    minimumValue: '0',
    maximumValue: '1000000',
    modifyValueOnWheel: true
  });
});

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

  • querySelectorAll выбирает все элементы с классом .currency.
  • Метод forEach перебирает каждый элемент и создает для него экземпляр AutoNumeric.
  • Все поля получают единый формат отображения и ограничения, что гарантирует консистентность интерфейса.

Инициализация с разными конфигурациями

Если необходимо инициализировать группы элементов с разными настройками, можно разделить их по классам или атрибутам:

// Поля с ценами
document.querySelectorAll('.price').forEach(input => {
  new AutoNumeric(input, {
    currencySymbol: '€',
    decimalPlaces: 2,
    digitGroupSeparator: '.'
  });
});

// Поля с процентами
document.querySelectorAll('.percent').forEach(input => {
  new AutoNumeric(input, {
    suffixText: '%',
    decimalPlaces: 1,
    minimumValue: '0',
    maximumValue: '100'
  });
});

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

Инициализация через NodeList или массив элементов

AutoNumeric поддерживает прямую инициализацию через NodeList или массив DOM-элементов. Это позволяет создавать удобные обертки для динамически добавляемых элементов:

const elementsArray = Array.from(document.querySelectorAll('.dynamic-number'));

const autoNumericInstances = AutoNumeric.multiple(elementsArray, {
  decimalCharacter: ',',
  digitGroupSeparator: ' ',
  decimalPlaces: 3
});

Особенности:

  • Метод AutoNumeric.multiple возвращает массив экземпляров AutoNumeric.
  • Это упрощает последующую работу с отдельными элементами, например, для чтения или установки значений программно.

Динамическое добавление новых элементов

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

function addDynamicField() {
  const container = document.getElementById('fields-container');
  const input = document.createElement('input');
  input.classList.add('dynamic-number');
  container.appendChild(input);

  new AutoNumeric(input, {
    currencySymbol: '₽',
    decimalPlaces: 2,
    modifyValueOnWheel: false
  });
}

Подход гарантирует, что новые элементы будут корректно отформатированы без перезапуска всей инициализации.

Советы по производительности

  1. Инициализировать только необходимые поля — выборка по конкретным классам или атрибутам уменьшает количество создаваемых экземпляров.
  2. Использовать AutoNumeric.multiple при работе с большим количеством элементов — метод оптимизирован для массовой инициализации.
  3. Избегать повторной инициализации одного элемента — если элемент уже имеет AutoNumeric, повторная инициализация может вызвать ошибки или некорректное отображение.

Управление экземплярами

После групповой инициализации удобно хранить массив экземпляров для последующих операций:

const autoNumericFields = AutoNumeric.multiple(
  document.querySelectorAll('.currency'),
  { currencySymbol: '$', decimalPlaces: 2 }
);

// Установка значения первого поля
autoNumericFields[0].set(1234.56);

// Получение числового значения всех полей
const values = autoNumericFields.map(instance => instance.getNumber());

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

Оглавление