Поведение выделения содержимого при получении фокуса в AutoNumeric определяется набором конфигурационных параметров, влияющих на то, будет ли значение полностью выделяться, частично подсвечиваться или оставаться без изменения курсора. Эти механизмы тесно связаны с форматированием числа, поскольку отображаемое значение в поле ввода не совпадает с его «сырой» числовой формой.
При активации поля ввода библиотека синхронизирует отображаемое значение с внутренним числовым состоянием и затем применяет правила поведения курсора. На этом этапе возможны три базовые стратегии:
Эти стратегии управляются настройками и могут комбинироваться с обработкой событий фокуса браузера.
Наиболее распространённое поведение — автоматическое выделение всего
содержимого при получении фокуса. Оно активируется параметрами
конфигурации, связанными с selectOnFocus и его
вариациями.
При включённом режиме поле ведёт себя следующим образом:
Такой режим особенно заметен в полях, где ввод предполагает полную замену значения, а не редактирование отдельных цифр.
selectOnFocus управляет базовой логикой выделения при
активации поля через клавиатуру или программный вызов
focus().
Поведение можно описать через внутреннюю последовательность:
select() к содержимому input.При этом важно, что выделение происходит уже после того, как браузер установил курсор по умолчанию, что позволяет переопределить стандартное поведение HTML.
В более сложных сценариях различается момент срабатывания:
selectOnFocus — реагирует на сам факт получения
фокуса;selectOnFocusIn — ориентируется на событие
focusin, которое всплывает и позволяет более точно
контролировать поведение при вложенных элементах.Разница проявляется в интерфейсах, где поле может находиться внутри
сложных компонентов (например, таблиц или кастомных форм). В таких
случаях focusin позволяет избежать повторного или
некорректного выделения при переключениях между дочерними
элементами.
Отдельный режим поведения связан с выделением только значимой числовой части значения без форматирующих символов. Он используется, когда отображение включает:
В этом режиме AutoNumeric может выделять только цифры, игнорируя:
Такое поведение особенно важно для интерфейсов, где редактирование предполагает сохранение визуального формата, но быструю замену числового ядра.
Параметр caretPositionOnFocus определяет, где будет
установлен курсор, если полное выделение отключено.
Возможные стратегии поведения:
Этот параметр критичен в сценариях, где пользователь возвращается к редактированию ранее введённого значения, поскольку позволяет избежать полного сброса позиции ввода.
Если поле допускает временное очищение при активации, поведение выделения изменяется.
При включённом emptyOnFocus:
Это создаёт эффект «чистого ввода», при котором пользователь сразу вводит новое число без необходимости удаления старого значения.
Выделение тесно связано с тем, как AutoNumeric отображает число. При фокусе может происходить временная нормализация значения:
После этого применяется логика выделения. Это важно, поскольку браузер работает уже с отформатированной строкой, а не с исходным числом.
Особенно заметны различия при работе с:
При вызове focus() из JavaScript поведение не отличается
от пользовательского взаимодействия, однако порядок событий может быть
другим:
const anElement = new AutoNumeric('#price', {
selectOnFocus: true
});
document.querySelector('#price').addEventListener('click', () => {
anElement.set(12345.67);
document.querySelector('#price').focus();
});В подобных случаях AutoNumeric может сначала обновить значение, а затем применить выделение, что приводит к мгновенной подсветке нового содержимого.
При повторном входе в поле возможны различия в логике:
selectOnFocus и событий
click, mousedown и focus.Это особенно заметно в сценариях, где пользователь часто переключается между несколькими полями ввода.
На мобильных устройствах поведение выделения ограничено возможностями виртуальной клавиатуры и браузера:
AutoNumeric в таких условиях старается сохранить консистентность значения, но не всегда может полностью контролировать UI-слой ввода.
В реальных конфигурациях параметры выделения часто комбинируются:
selectOnFocus: true + emptyOnFocus: false
— полное выделение значения при входе;selectOnFocus: false +
caretPositionOnFocus: 'end' — установка курсора в конец
числа;selectNumberOnly: true + форматирование валюты —
редактирование только числовой части без влияния на символы.Такие комбинации позволяют тонко управлять тем, как пользователь взаимодействует с числовым полем, не нарушая визуальную структуру данных.
При включённых разделителях тысяч и валютных префиксах выделение может вести себя неодинаково для разных частей строки:
selectionStart/selectionEnd;Это связано с тем, что AutoNumeric разделяет визуальное представление и внутреннее числовое значение, а выделение строится поверх уже отформатированной строки.