Событие input

Событие input в контексте библиотеки AutoNumeric играет ключевую роль в синхронизации пользовательского ввода с форматированным и «сырым» числовым представлением значения. Несмотря на то, что оно основано на стандартном DOM-событии input, поведение в AutoNumeric имеет существенные особенности, связанные с автоматическим форматированием, локализацией чисел и внутренним управлением состоянием инстанса.

Общая модель поведения события input

В стандартном HTML-инпуте событие input возникает при любом изменении значения поля: ввод символа, удаление, вставка, автозаполнение. В AutoNumeric это событие сохраняется, но его семантика расширяется:

  • пользователь вводит символ;
  • AutoNumeric перехватывает ввод;
  • выполняется преобразование значения;
  • производится форматирование согласно настройкам;
  • обновляется DOM-значение поля;
  • затем инициируется или проксируется событие input.

Ключевой момент заключается в том, что значение, доступное через event.target.value, уже содержит форматированное представление числа, а не «сырой» ввод пользователя.

Отличие от нативного input-события

В обычном input:

input.value // "1234"

В AutoNumeric:

input.value // "1,234.00" (пример при соответствующей конфигурации)

Таким образом:

  • нативное событие отражает состояние поля после любого изменения;
  • AutoNumeric-реализация отражает уже обработанное значение;
  • сырой ввод недоступен напрямую через value.

Для получения неформатированного значения используется API:

autoNumericInstance.getNumber(); // число
autoNumericInstance.getNumericString(); // строковое число

Момент срабатывания события

Событие input в AutoNumeric возникает после завершения внутренней обработки ввода. Это критически важно для понимания порядка операций:

  1. клавиша нажата;
  2. символ проходит фильтрацию (разрешён/запрещён);
  3. значение пересчитывается;
  4. применяется формат (разделители, округление, знаки валюты);
  5. обновляется DOM;
  6. генерируется input.

Из-за этого обработчики input всегда получают уже стабилизированное значение.

Подписка на событие input

Нативная подписка

AutoNumeric не отменяет стандартный механизм подписки:

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

input.addEventListener('input', (event) => {
    console.log(event.target.value);
});

Однако важно учитывать, что значение уже форматировано.

Использование через AutoNumeric instance

В большинстве случаев предпочтительнее использовать инстанс:

const anElement = AutoNumeric.getAutoNumericElement('#price');

anElement.node.addEventListener('input', () => {
    console.log(anElement.getNumericString());
});

Такой подход позволяет:

  • отделить форматированный UI-слой от бизнес-логики;
  • получать «чистые» данные;
  • избегать ошибок парсинга.

Особенности поведения при форматировании

AutoNumeric может изменять значение даже при минимальном вводе. Например:

  • ввод 1 → 1.00
  • ввод 1234 → 1,234.00
  • удаление → 0.00 или пустое значение (в зависимости от настроек)

Это означает, что событие input может срабатывать даже в случаях, когда пользователь визуально «не завершил» ввод числа.

Влияние настроек AutoNumeric

Событие input тесно связано с конфигурацией экземпляра:

decimalPlaces

Определяет количество знаков после запятой.

decimalPlaces: 2

Любой ввод приводит к автоматическому округлению, что отражается в input.

digitGroupSeparator

Разделитель групп разрядов влияет на визуальное значение:

digitGroupSeparator: ','

При каждом input значение пересобирается.

unformatOnSubmit и поведение input

Некоторые режимы AutoNumeric предполагают различие между UI-значением и значением при отправке формы. Однако событие input всегда связано именно с UI-слоем и не учитывает submit-трансформации.

Разница между input и autoNumeric:formatted

AutoNumeric предоставляет собственные события, и одно из ключевых — autoNumeric:formatted.

Сравнение:

Событие Что означает Формат значения
input изменение поля форматированное
autoNumeric:formatted завершение форматирования гарантированно стабилизированное
autoNumeric:rawValueModified изменение сырого значения числовое

input находится между пользовательским вводом и внутренними событиями библиотеки, поэтому часто используется как «реактивный слой UI».

Программное изменение значения и input

Важно учитывать, что вызовы API AutoNumeric могут не всегда триггерить input.

Пример:

anElement.set(1000);

В зависимости от конфигурации:

  • может быть вызвано input;
  • может быть вызвано только внутреннее обновление;
  • может быть вызвано change, но не input.

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

autoNumeric:formatted

Сценарии использования input в AutoNumeric

1. Живая валидация

input.addEventListener('input', () => {
    const value = anElement.getNumber();

    if (value > 10000) {
        console.log('Превышение лимита');
    }
});

Особенность: значение уже нормализовано, нет необходимости парсинга строки.

2. Расчёты в реальном времени

input.addEventListener('input', () => {
    const price = anElement.getNumber();
    const tax = price * 0.2;

    document.querySelector('#tax').textContent = tax;
});

3. Связанные поля

priceInput.addEventListener('input', () => {
    const price = priceAN.getNumber();
    const discount = price * 0.1;

    discountAN.set(discount);
});

Важно учитывать возможные циклы событий.

Потенциальные проблемы

1. Частота срабатывания

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

Следствие:

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

Решение:

  • debounce;
  • разделение UI и логики.

2. Конфликты с внешними обработчиками

Если сторонний код ожидает «сырое» значение:

event.target.value

он может получить неожиданный формат (1,234.00 вместо 1234).

3. Перезапись значения внутри input

AutoNumeric может изменять значение прямо в обработке input, что иногда приводит к:

  • скачкам курсора;
  • визуальным артефактам при сложных форматах.

Взаимодействие с курсором

AutoNumeric при каждом input пересчитывает строку и может:

  • корректировать позицию каретки;
  • восстанавливать позицию после вставки;
  • изменять поведение backspace/delete.

Это влияет на восприятие события: input может срабатывать даже при внутренних коррекциях, не инициированных пользователем напрямую.

Сравнение поведения в разных режимах

Режим стандартного числа

  • input стабилен;
  • минимальная переработка строки;
  • предсказуемое поведение.

Валютный режим

  • добавляются символы валют;
  • увеличивается количество перерасчётов;
  • input становится более «шумным».

Процентный режим

  • автоматическое добавление %;
  • преобразование значения при каждом вводе.

Рекомендованная архитектура обработки input

В сложных приложениях input используется только как триггер UI-обновления:

input.addEventListener('input', () => {
    queueMicrotask(() => {
        const value = anElement.getNumber();
        updateModel(value);
    });
});

Такой подход позволяет:

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

Особенности работы с формами

При использовании AutoNumeric внутри <form> событие input не влияет на отправку данных напрямую, но участвует в:

  • live validation;
  • синхронизации state;
  • интеграции с framework-обвязками (React/Vue/Angular через адаптеры).

Итоговая модель поведения

Событие input в AutoNumeric можно рассматривать как слой:

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

Его основная особенность — работа не с «сырым текстом», а с постоянно нормализуемым представлением числа, что делает его удобным для реактивных интерфейсов и одновременно требовательным к архитектуре обработки данных.

Оглавление