Событие blur и focus

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

При активации поля (focus) библиотека может переключать режим отображения между форматированным и «сырым» значением в зависимости от конфигурации. Это позволяет управлять тем, что именно видит пользователь в момент редактирования: форматированное число с разделителями тысяч и валютными символами либо чистое числовое значение без визуального оформления.

AutoNumeric предоставляет механизм перехвата события focus через встроенные опции и стандартные DOM-обработчики. На уровне DOM событие focus срабатывает при переходе курсора в поле ввода:

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

element.addEventListener('focus', () => {
    console.log('Поле получило фокус');
});

При использовании AutoNumeric логика усложняется тем, что библиотека может изменять отображаемое значение в момент фокуса. Например, если включена опция очистки форматирования при редактировании, визуальное представление числа становится «чистым»:

const anElement = AutoNumeric.multiple('.money-input', {
    digitGroupSeparator: ' ',
    decimalCharacter: ',',
    unformatOnHover: false,
    unformatOnFocus: true
});

В данном сценарии при активации поля значение 1 234,56 может быть преобразовано в 1234.56, чтобы облегчить редактирование без визуальных отвлекающих символов.

Важным аспектом является сохранение внутреннего состояния. AutoNumeric всегда хранит числовое значение независимо от того, как оно отображается в input. Это значение доступно через API:

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

element.addEventListener('focus', () => {
    const rawValue = anElement.getNumericString();
    console.log(rawValue);
});

Изменение отображения при фокусе

Поведение при focus часто определяется настройками форматирования. Ключевые параметры:

  • unformatOnFocus — отключает форматирование при входе в поле
  • selectOnFocus — выделяет содержимое при активации
  • caretPositionOnFocus — управляет позицией курсора
  • showOnlyNumbersOnFocus (в некоторых конфигурациях поведения) — упрощает отображение

Пример конфигурации, ориентированной на удобство редактирования:

AutoNumeric.multiple('.amount', {
    digitGroupSeparator: ' ',
    decimalCharacter: '.',
    currencySymbol: '$ ',
    currencySymbolPlacement: 'p',
    unformatOnFocus: true,
    selectOnFocus: true
});

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

Поведение при потере фокуса (blur)

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

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

element.addEventListener('blur', () => {
    console.log('Поле потеряло фокус');
});

При использовании AutoNumeric событие blur может сопровождаться автоматическим применением маски форматирования. Например, после редактирования пользователь вводит 1234.5, а при выходе из поля значение преобразуется в 1 234,50.

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

Форматирование при blur

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

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

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

  • ввод: 1000
  • blur: 1 000,00

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

Перехват blur для получения rawValue

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

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

document.querySelector('#price').addEventListener('blur', () => {
    const numericValue = anElement.getNumber();
    console.log(numericValue);
});

Методы:

  • getNumber() — возвращает числовое значение
  • getNumericString() — строковое представление числа без форматирования
  • getFormatted() — текущее отображаемое значение

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

Взаимодействие focus и blur с жизненным циклом AutoNumeric

События focus и blur тесно связаны с состоянием экземпляра AutoNumeric. При инициализации:

const anElement = new AutoNumeric('#price', {
    currencySymbol: '€',
    decimalCharacter: ',',
    digitGroupSeparator: '.'
});

последовательность взаимодействия обычно выглядит следующим образом:

  1. инициализация значения и форматирование
  2. focus — переход в режим редактирования
  3. ввод пользователя с возможной временной деформацией отображения
  4. blur — нормализация и финальное форматирование

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

Управление курсором при focus

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

AutoNumeric.multiple('.amount', {
    currencySymbol: '$ ',
    currencySymbolPlacement: 'p',
    selectOnFocus: true
});

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

Сценарии синхронизации данных

В прикладных системах focus и blur часто используются как точки синхронизации состояния формы.

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

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

    formState.price = value;
    validateField('price', value);
});

В этом сценарии blur выступает как финальный момент фиксации данных, после которого выполняется:

  • обновление состояния формы
  • валидация
  • подготовка данных для отправки

Focus в свою очередь может использоваться для подготовки поля:

input.addEventListener('focus', () => {
    clearValidationError('price');
});

Особенности взаимодействия с форматированием при частом переключении фокуса

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

Типичный проблемный паттерн:

  • blur вызывает форматирование
  • focus вызывает обратное преобразование
  • дополнительная логика снова изменяет значение

Для предотвращения нестабильности рекомендуется разделять:

  • визуальное форматирование (AutoNumeric)
  • бизнес-логику (внешние обработчики)

Использование событий в сложных формах

В формах с множественными числовыми полями focus и blur часто применяются для управления контекстом редактирования:

document.querySelectorAll('.numeric').forEach((el) => {
    el.addEventListener('focus', () => {
        el.classList.add('active-field');
    });

    el.addEventListener('blur', () => {
        el.classList.remove('active-field');
    });
});

При использовании AutoNumeric это поведение дополняется автоматическим управлением значением, что позволяет разделить визуальную и логическую части взаимодействия.

Состояния значения в момент focus и blur

AutoNumeric оперирует тремя основными представлениями значения:

  • отображаемое (formatted)
  • числовое (numeric)
  • строковое без форматирования (unformatted string)

На focus может меняться отображаемое представление, но numeric остаётся неизменным. На blur происходит синхронизация отображаемого значения с правилами форматирования.

input.addEventListener('focus', () => {
    console.log(anElement.getFormatted());
});

input.addEventListener('blur', () => {
    console.log(anElement.getFormatted());
});

Разница между этими состояниями проявляется в зависимости от настроек и режима редактирования.

Поведение при программном вызове focus и blur

AutoNumeric корректно реагирует на программные вызовы:

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

input.focus();
input.blur();

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

  • сначала обновление значения
  • затем blur
  • затем извлечение данных

Нарушение последовательности может приводить к рассинхронизации UI и модели данных.

Оглавление