Стилизация при фокусе

Механизм обработки фокуса в AutoNumeric основан на перехвате стандартных DOM-событий focus, blur, focusin, focusout и синхронизации отображаемого значения с внутренним числовым состоянием. При активации поля ввода библиотека может переключать представление числа между «человеческим» форматом (разделители тысяч, символы валют, фиксированное количество знаков после запятой) и «редактируемым» видом, где пользователь работает с более «сырыми» данными.

Фокусировка рассматривается не только как событие UI, но и как триггер для изменения визуальной структуры значения, поведения курсора и CSS-состояния элемента.

Внутренний цикл обработки focus/blur

При получении фокуса на input, управляемом AutoNumeric, выполняется последовательность действий:

  • сохранение текущего форматированного представления
  • вычисление «чистого» числового значения (unformatted value)
  • возможная временная деформатизация строки
  • установка курсора в корректную позицию
  • добавление/удаление CSS-классов состояния

При потере фокуса происходит обратная операция:

  • парсинг введённого значения
  • нормализация числа согласно правилам локали
  • повторное форматирование
  • восстановление маски отображения

CSS-состояние и стилизация при фокусе

Основной способ визуального выделения активного поля — использование стандартного псевдокласса :focus, однако в контексте AutoNumeric это поведение часто дополняется классами состояния, добавляемыми программно.

Базовый CSS-подход

input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

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

Динамические классы состояния

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

Пример логики:

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

input.addEventListener('focus', () => {
  input.classList.add('is-focused');
});

input.addEventListener('blur', () => {
  input.classList.remove('is-focused');
});

CSS:

input.is-focused {
  border-color: #22c55e;
  background-color: #f0fdf4;
}

Такой подход позволяет отделить визуальную логику от встроенного поведения библиотеки.

Влияние форматирования на UX при фокусе

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

  • разделителей тысяч
  • символов валют
  • фиксированных десятичных знаков
  • отрицательных форматов

Типичный сценарий

До фокуса:

1,234,567.89 €

При фокусе (упрощённый режим редактирования):

1234567.89

После blur:

1,234,567.89 €

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

Конфигурационные параметры, влияющие на фокус

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

unformatOnFocus

Опция управляет тем, будет ли значение преобразовано в «чистый» вид при активации поля.

new AutoNumeric('#amount', {
  unformatOnFocus: true
});

При включении:

  • строка упрощается
  • удаляются групповые разделители
  • упрощается ввод больших чисел

showOnlyNumbersOnFocus

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

Поведение:

  • до фокуса: € 12.500,00
  • при фокусе: 12500,00

selectOnFocus

Опция управляет выделением значения при активации поля.

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

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

caretPositionOnFocus

Регулирует позицию курсора при активации поля:

  • в начале строки
  • в конце строки
  • в позиции последнего редактирования
new AutoNumeric('#amount', {
  caretPositionOnFocus: "end"
});

Обработка событий focus и blur внутри библиотеки

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

  • onFocus
  • onBlur
  • onFocusIn
  • onFocusOut

Эти события позволяют подключать кастомную логику форматирования.

Пример:

new AutoNumeric('#amount', {
  onFocus: (event) => {
    event.target.style.backgroundColor = '#fff7ed';
  },
  onBlur: (event) => {
    event.target.style.backgroundColor = '';
  }
});

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

При смене локали или правил форматирования поведение фокуса становится критическим элементом UX. В AutoNumeric локали определяют:

  • символы разделителей
  • формат отрицательных чисел
  • позицию валютного символа

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

Управление классами через callbacks

Расширенная стилизация реализуется через callback-функции, где можно вручную управлять состоянием элемента.

Пример добавления классов:

new AutoNumeric('#amount', {
  onFocus: (event) => {
    event.target.classList.add('editing');
  },
  onBlur: (event) => {
    event.target.classList.remove('editing');
  }
});

CSS:

input.editing {
  letter-spacing: 0.5px;
  font-weight: 500;
}

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

Переходные состояния и визуальная стабильность

При работе с AutoNumeric важно учитывать кратковременные переходы между форматами. В момент фокуса могут происходить:

  • перерасчёт позиции курсора
  • замена символов валют
  • изменение длины строки
  • переразметка DOM-значения

Для предотвращения «мигания» интерфейса применяются:

  • transition CSS только для border/background
  • отключение анимаций текста
  • фиксация ширины input
  • использование monospace-шрифтов для числового ввода
input {
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

Согласованность фокуса при множественных полях

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

  • снятие выделения с предыдущего поля
  • корректное завершение форматирования blur
  • предотвращение конфликтов курсора при быстром переключении

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

document.addEventListener('focusin', (e) => {
  document.querySelectorAll('.is-focused')
    .forEach(el => el.classList.remove('is-focused'));

  e.target.classList.add('is-focused');
});

Влияние фокуса на производительность

При интенсивном использовании большого количества input-полей с активным форматированием AutoNumeric может увеличивать нагрузку из-за:

  • частых пересчётов строк
  • переработки масок при каждом focus/blur
  • обновления DOM-значения

Оптимизация достигается за счёт:

  • отключения лишних callbacks
  • минимизации форматирования на focus
  • кэширования числового состояния
Оглавление