Интеграция с HTML-формами

Интеграция AutoNumeric с HTML-формами начинается с привязки экземпляров форматирования к стандартным элементам ввода. Библиотека работает поверх обычных <input>-полей и изменяет поведение отображения и ввода числовых значений, не нарушая стандартную модель DOM.

Базовая инициализация строится вокруг создания экземпляра AutoNumeric для конкретного элемента:

import AutoNumeric from 'autonumeric';

const input = document.querySelector('#price');

const anElement = new AutoNumeric(input, {
    decimalCharacter: ',',
    digitGroupSeparator: ' ',
    currencySymbol: '₸',
    currencySymbolPlacement: 's',
    minimumValue: '0'
});

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

Работа с несколькими полями формы

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

const elements = document.querySelectorAll('.numeric');

const instances = [];

elements.forEach((el) => {
    instances.push(
        new AutoNumeric(el, {
            decimalPlaces: 2,
            decimalCharacter: '.',
            digitGroupSeparator: ',',
            modifyValueOnWheel: false
        })
    );
});

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

Получение значений при отправке формы

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

const form = document.querySelector('#form');

form.addEventListener('submit', (event) => {
    event.preventDefault();

    const data = {
        price: instances[0].getNumber(),
        tax: instances[1].getNumber()
    };

    console.log(data);
});

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

Синхронизация отображаемого и числового значения

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

instances[0].set(15000.5);

При вызове set() автоматически обновляется как отображаемое значение, так и внутреннее числовое представление. Это особенно важно при динамических пересчётах значений в форме.

Интеграция с нативной валидацией HTML5

HTML5-валидация может работать совместно с AutoNumeric, однако требует учета форматирования. Атрибуты min, max и step продолжают функционировать, если внутреннее значение корректно извлекается.

<input id="amount" type="text" min="0" max="10000" required />
const amount = new AutoNumeric('#amount', {
    minimumValue: '0',
    maximumValue: '10000'
});

При этом стандартная проверка формы использует уже числовое значение, если извлечение происходит через getNumber() до отправки.

Динамическое изменение параметров в формах

В ряде сценариев требуется изменение формата в процессе работы формы. AutoNumeric поддерживает обновление конфигурации без пересоздания экземпляра.

instances[0].update({
    decimalPlaces: 0,
    currencySymbol: '$'
});

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

Обработка событий ввода

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

input.addEventListener('autoNumeric:rawValueModified', (e) => {
    console.log(e.detail.newRawValue);
});

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

Интеграция с вычисляемыми полями

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

const price = instances[0];
const quantity = instances[1];
const total = new AutoNumeric('#total', { readOnly: true });

function recalc() {
    const result = price.getNumber() * quantity.getNumber();
    total.set(result);
}

price.domElement.addEventListener('input', recalc);
quantity.domElement.addEventListener('input', recalc);

Подобная структура исключает необходимость ручного парсинга строк и предотвращает ошибки округления.

Работа с отправкой данных через AJAX

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

form.addEventListener('submit', async (e) => {
    e.preventDefault();

    const payload = {
        price: instances[0].getNumber(),
        quantity: instances[1].getNumber()
    };

    await fetch('/api/submit', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
    });
});

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

Деинициализация и очистка экземпляров

При работе с динамическими интерфейсами (например, SPA) важно корректно уничтожать экземпляры AutoNumeric, чтобы избежать утечек памяти.

instances.forEach((an) => {
    an.remove();
});

Метод remove() восстанавливает исходное поведение input-элемента и удаляет привязанные обработчики.

Интеграция с динамически создаваемыми формами

При создании полей на лету требуется повторная инициализация AutoNumeric после вставки DOM-элемента.

const container = document.querySelector('#container');

function addField() {
    const input = document.createElement('input');
    input.type = 'text';
    container.appendChild(input);

    const instance = new AutoNumeric(input, {
        decimalPlaces: 2
    });

    instances.push(instance);
}

Такая схема позволяет масштабировать формы без потери функциональности форматирования.

Поведение при вставке и буфере обмена

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

new AutoNumeric('#input', {
    allowDecimalPadding: true,
    selectOnFocus: true
});

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

Совместимость с серверной валидацией

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

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

Оглавление