selectOnFocus

Параметр selectOnFocus в библиотеке AutoNumeric управляет поведением текстового поля при получении фокуса. Он определяет, будет ли содержимое инпута автоматически выделяться при активизации поля ввода. Данный механизм влияет на UX при редактировании числовых значений, ускоряет замену данных и снижает количество ручных действий со стороны пользователя.

Поведение параметра selectOnFocus

В основе работы параметра лежит обработка события focus на DOM-элементе. При значении true библиотека автоматически вызывает выделение содержимого поля через setSelectionRange, либо аналогичный механизм, зависящий от типа элемента и окружения браузера.

Основные сценарии поведения:

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

Конфигурация параметра

Параметр задаётся в объекте инициализации AutoNumeric:

new AutoNumeric(inputElement, {
    selectOnFocus: true
});

Допустимые значения:

  • true — выделение всего содержимого при получении фокуса;
  • false — стандартное поведение браузера без автоматического выделения.

В некоторых реализациях допускается использование булевых эквивалентов, где 1 интерпретируется как true, а 0 как false, однако предпочтительным является строгое булево значение.

Взаимодействие с форматированием AutoNumeric

AutoNumeric постоянно поддерживает форматированное представление числа в поле ввода. Это влияет на момент применения выделения:

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

Пример:

€ 1 234.56

При фокусе выделяется вся строка целиком, включая символ валюты и пробелы форматирования.

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

Использование selectOnFocus: true радикально меняет модель взаимодействия с полем:

Полная замена значения

При первом вводе символа после фокуса старое значение удаляется:

  • фокус на поле с 12 500.00
  • ввод 7
  • результат: 7

Частичное редактирование при отмене выделения

Если пользователь снимает выделение вручную (например, кликом в конец строки), поведение становится стандартным текстовым редактированием без автоматической замены.

Быстрая коррекция значений

Основное назначение режима — ускорение ввода новых чисел, особенно в формах с частыми изменениями данных (финансовые таблицы, CRM-интерфейсы, админ-панели).

Программная установка фокуса

При вызове метода focus() на элементе, управляемом AutoNumeric, параметр selectOnFocus также применяется:

anElement.focus();

Если selectOnFocus: true, после программного вызова:

  • значение будет автоматически выделено;
  • курсор не останется внутри строки;
  • дальнейший ввод заменит значение целиком.

Особенности работы в разных браузерах

Реализация выделения зависит от возможностей окружения:

Chromium-based браузеры

  • стабильное поведение setSelectionRange;
  • корректная работа с форматированными числами;
  • отсутствие смещения курсора при символах валют.

Firefox

  • корректная поддержка выделения, но возможны микрозадержки при большом количестве форматирования;
  • иногда наблюдается повторное срабатывание события focus при программных изменениях.

Safari

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

Взаимодействие с опцией selectNumberOnly (косвенно)

При комбинации настроек:

  • selectOnFocus: true
  • selectNumberOnly: true

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

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

Это важно в интерфейсах, где символ валюты должен сохраняться неизменным.

Поведение при пустом значении

Если поле содержит пустую строку или значение null (в рамках конфигурации emptyInputBehavior):

  • выделение не имеет визуального эффекта;
  • курсор устанавливается в начало поля;
  • дальнейший ввод создаёт новое значение без предварительной очистки.

Влияние на мобильные устройства

На мобильных устройствах поведение отличается из-за системных ограничений клавиатур:

  • полное выделение может быть визуально сокращено системой;
  • некоторые клавиатуры игнорируют автоматическое выделение;
  • при тапе по полю иногда сохраняется только каретка без выделения;
  • iOS Safari может частично сбрасывать выделение при автозумировании.

Конфликты с другими настройками AutoNumeric

watchExternalChanges

При включённом наблюдении за внешними изменениями:

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

modifyValueOnWheel

При изменении значения колесом мыши:

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

contentEditable режим

При использовании AutoNumeric с contenteditable:

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

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

Табличные интерфейсы

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

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

Формы ввода финансовых данных

При вводе сумм:

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

Административные панели

В админ-интерфейсах:

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

Ограничения и побочные эффекты

Несмотря на удобство, поведение имеет ряд технических ограничений:

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

Внутренняя логика обработки фокуса

Механизм работы можно описать последовательностью:

  1. Перехват события focus.
  2. Завершение форматирования значения AutoNumeric.
  3. Проверка состояния selectOnFocus.
  4. Определение диапазона выделения.
  5. Вызов setSelectionRange(0, length) или аналогичного метода.
  6. Установка состояния курсора и синхронизация внутреннего state библиотеки.

Особенности при динамическом изменении опции

При изменении параметра после инициализации:

anElement.update({
    selectOnFocus: false
});

поведение изменяется только для последующих фокусировок:

  • текущее выделение не пересчитывается;
  • уже активное поле сохраняет прежнее состояние до blur/focus цикла.

Влияние на доступность (Accessibility)

С точки зрения доступности:

  • автоматическое выделение может конфликтовать с screen reader;
  • пользователи клавиатурной навигации могут терять контекст редактирования;
  • рекомендуется учитывать альтернативные режимы ввода при сложных формах.
Оглавление