В библиотеке AutoNumeric логика отображения значения при фокусировке на поле ввода является отдельным слоем обработки, который накладывается поверх базового форматирования числа. При переходе элемента в состояние focus библиотека может изменять визуальное представление значения, управлять выделением текста, положением каретки и временным снятием форматирования в зависимости от конфигурации.
При получении фокуса элемент <input> продолжает
содержать числовое значение, но AutoNumeric может переключать режим
отображения между:
Поведение определяется набором параметров и внутренними событиями фокуса:
focusblurkeydownmouseupclickAutoNumeric перехватывает эти события и применяет правила форматирования динамически.
selectOnFocusОдним из ключевых механизмов управления отображением при фокусе
является опция selectOnFocus.
Если включён режим:
selectOnFocus: trueто при получении фокуса:
Это поведение часто используется в формах ввода сумм и числовых значений, где предполагается полная перезапись.
selectOnFocus: falseВ этом случае:
emptyInputBehaviorОпция emptyInputBehavior влияет на то, как отображается
пустое или нулевое значение при фокусе.
Основные режимы:
emptyInputBehavior: "focus"При фокусе:
emptyInputBehavior: "zero"emptyInputBehavior: "min"AutoNumeric может временно изменять форматирование при активации поля. Это поведение регулируется опциями, связанными с режимом отображения.
При фокусе часто применяется режим упрощённого отображения:
Пример:
1 234 567,89 → 1234567,89Это улучшает редактируемость и снижает риск ошибок при вставке.
Символ валюты может вести себя по-разному при фокусе:
В некоторых конфигурациях:
В других режимах:
Это регулируется параметрами форматирования валютного отображения и позицией символа (prefix/suffix).
Каретка (caret) — ключевой элемент UX при редактировании чисел.
AutoNumeric управляет её поведением следующим образом:
При фокусе каретка может:
Если в поле есть разделители:
1,234,567.00то библиотека:
При активации поля:
Это типично для финансовых форм.
При фокусе:
Используется в аналитических и инженерных интерфейсах.
При фокусе:
focus внутри AutoNumericПри наступлении события focus выполняется
последовательность операций:
Важный момент: библиотека различает программный и пользовательский фокус, чтобы избежать конфликтов при автозаполнении и динамическом изменении DOM.
blur и восстановление форматаОтображение при фокусе тесно связано с обратным переходом:
blur форматирование обычно восстанавливаетсяТаким образом формируется цикл:
blur → форматированное отображение
focus → упрощённое отображениеЕсли пользователь вставляет значение (paste) в момент активного фокуса:
При включённом упрощённом режиме отображения вставка может временно игнорировать формат до следующего события обработки ввода.
Локализация напрямую влияет на то, как AutoNumeric перестраивает значение при активации поля:
Это позволяет поддерживать единый UX при работе с разными региональными форматами чисел.
Наиболее значимые комбинации:
selectOnFocus: trueРезультат: быстрое полное перезаписывание значения.
selectOnFocus: falseРезультат: редактирование отдельных частей числа.
Результат: максимально чистое поле ввода.
При сложных форматах возможны особенности:
Эти эффекты обычно проявляются при нестандартных масках или кастомных конфигурациях форматирования.
Фокус является точкой переключения между двумя состояниями:
Именно в момент фокуса происходит основная трансформация визуального представления числа, что позволяет библиотеке одновременно поддерживать: