Автоматическая инициализация

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

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

Автоматическая инициализация основана на использовании атрибутов HTML. Основной атрибут — data-an-default, который может принимать объект настроек в формате JSON. Пример использования:

<input type="text" data-an-default='{"decimalPlaces": 2, "digitGroupSeparator": ","}'>

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

Применение стандартных настроек

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

AutoNumeric.defaultOptions = {
    decimalPlaces: 2,
    digitGroupSeparator: ',',
    decimalCharacter: '.',
    currencySymbol: '$',
    unformatOnSubmit: true
};

После этого все поля с атрибутом data-an-default будут автоматически получать эти настройки при инициализации.

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

AutoNumeric поддерживает автоматическую инициализацию элементов, выбранных по CSS-селекторам. Например, для всех полей с классом .autoNumeric:

<input type="text" class="autoNumeric">
<input type="text" class="autoNumeric">
AutoNumeric.multiple('.autoNumeric', {
    decimalPlaces: 2,
    digitGroupSeparator: ' ',
    decimalCharacter: '.'
});

Метод AutoNumeric.multiple() позволяет одновременно инициализировать несколько элементов с одинаковыми параметрами, что значительно экономит время при работе с динамическими формами.

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

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

const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
        mutation.addedNodes.forEach((node) => {
            if (node.matches && node.matches('.autoNumeric')) {
                new AutoNumeric(node, { decimalPlaces: 2, digitGroupSeparator: ',' });
            }
        });
    });
});

observer.observe(document.body, { childList: true, subtree: true });

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

Порядок инициализации и приоритет настроек

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

  1. Атрибут data-an-*: локальные настройки, заданные для конкретного поля, имеют наивысший приоритет.
  2. Глобальные настройки через AutoNumeric.defaultOptions: применяются ко всем полям, где локальные настройки отсутствуют.
  3. Параметры по умолчанию библиотеки: используются только если не заданы ни локальные, ни глобальные настройки.

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

Автоматическое форматирование при вводе

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

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

Пример конфигурации с автоматическим форматированием валют:

<input type="text" class="autoNumericCurrency" data-an-default='{"currencySymbol":"€","digitGroupSeparator":" ","decimalPlaces":2}'>
AutoNumeric.multiple('.autoNumericCurrency');

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

Расширенные возможности автоматической инициализации

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

  • onFocus: автоматическое снятие форматирования при фокусе,
  • onBlur: автоматическое восстановление форматирования после потери фокуса,
  • onChange: обработка изменений значения для передачи на сервер или в другие компоненты интерфейса.

Пример с обработчиком onBlur:

new AutoNumeric('.autoNumeric', {
    decimalPlaces: 2,
    digitGroupSeparator: ',',
    onBlur: (instance) => {
        console.log('Отформатированное значение:', instance.getNumericString());
    }
});

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

Итоговый подход к автоматической инициализации

Использование автоматической инициализации позволяет:

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

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

Оглавление