showMaskOnFocus

Назначение опции

showMaskOnFocus управляет тем, отображается ли маска ввода в момент получения полем фокуса. Речь идёт о визуальном поведении элемента <input> при активном состоянии, когда пользователь устанавливает курсор внутрь поля.

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

Ключевая идея заключается в контроле UX-поведения: показывать структуру ввода сразу при фокусе или оставлять поле визуально «пустым», пока пользователь не начнёт ввод.

Семантика поведения

Опция принимает логическое значение:

  • true — маска отображается при фокусе
  • false — маска не отображается при фокусе

При этом:

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

Важно, что речь идёт именно о визуальном слое. Логика подстановки символов маски (9, a, * и т.д.) продолжает работать независимо от этого флага.

Состояния фокуса и визуальная модель

Поведение showMaskOnFocus тесно связано с состояниями input-элемента:

  1. Blur (потеря фокуса) Поле может отображать либо пустое значение, либо форматированное значение, если оно уже введено.

  2. Focus (получение фокуса) Здесь вступает в действие showMaskOnFocus:

    • true → отображается шаблон маски
    • false → маска скрывается до первого ввода символа

  3. Input (ввод данных) Маска начинает заполняться пользователем независимо от настройки, но стартовое отображение определяется именно фокусным состоянием.

Взаимодействие с placeholder и маской

Inputmask использует комбинацию маски и placeholder-подстановок. showMaskOnFocus влияет на то, будет ли placeholder визуально представлен в момент активного состояния.

При различных конфигурациях возможны следующие комбинации поведения:

  • маска + placeholder одновременно
  • только маска без placeholder
  • скрытая маска до ввода

Особенно важно взаимодействие с параметром placeholder:

  • если placeholder задан явно, при showMaskOnFocus: true он часто визуально заменяется структурой маски;
  • при false placeholder может оставаться единственным визуальным ориентиром до ввода.

Влияние на UX-модель ввода

Разные значения showMaskOnFocus формируют различные модели взаимодействия:

Вариант с true
  • пользователь сразу видит формат ввода
  • уменьшается вероятность ошибок формата
  • повышается предсказуемость структуры данных

Визуально поле сразу демонстрирует шаблон вроде:

+7 (___) ___-__-__
Вариант с false
  • поле выглядит более «чистым» до ввода
  • структура данных не навязывается визуально
  • ввод начинается с пустого состояния

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

Комбинация с другими опциями Inputmask

showMaskOnFocus редко используется изолированно и часто входит в комплекс настроек поведения:

  • showMaskOnHover
  • clearMaskOnLostFocus
  • autoUnmask
  • placeholder
  • greedy

Каждая из этих опций изменяет восприятие поля, но именно showMaskOnFocus определяет момент появления структуры.

Взаимодействие с showMaskOnHover

При одновременной настройке:

  • showMaskOnHover: true
  • showMaskOnFocus: false

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

  • hover → маска видна
  • focus → маска скрыта
  • input → маска активируется по мере ввода

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

  • hover → маска видна
  • focus → маска остаётся видимой
Взаимодействие с clearMaskOnLostFocus

При значении:

  • clearMaskOnLostFocus: true

и showMaskOnFocus: false возможно состояние, при котором:

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

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

Взаимодействие с autoUnmask

При активном autoUnmask: true значение поля всегда хранится без маски, но визуальное поведение при фокусе всё равно регулируется showMaskOnFocus.

Это приводит к разделению:

  • визуальный слой (mask rendering)
  • модель данных (unmasked value)

showMaskOnFocus влияет только на визуальный слой, не затрагивая фактическое значение.

Примеры конфигураций

Базовая конфигурация с отображением маски при фокусе
Inputmask({
  mask: "+7 (999) 999-99-99",
  showMaskOnFocus: true
}).mask("#phone");

Поведение:

  • при фокусе сразу отображается структура номера
  • пользователь вводит значения в заранее заданные позиции
Скрытие маски при фокусе
Inputmask({
  mask: "99/99/9999",
  showMaskOnFocus: false
}).mask("#date");

Поведение:

  • при активации поле выглядит пустым
  • структура появляется только после начала ввода
Комбинация с hover-режимом
Inputmask({
  mask: "9999 9999 9999 9999",
  showMaskOnFocus: false,
  showMaskOnHover: true
}).mask("#card");

Поведение:

  • при наведении отображается шаблон карты
  • при фокусе шаблон скрывается
  • при вводе маска активируется постепенно

Особенности внутренней реализации

На уровне механизма Inputmask поведение showMaskOnFocus реализуется через управление рендерингом placeholder-символов и позиции курсора.

При активации поля выполняются следующие операции:

  1. проверка состояния фокуса input-элемента
  2. определение флага showMaskOnFocus
  3. условное применение mask placeholder
  4. перерасчёт позиции caret (курсорной позиции)

Если значение false, визуальный слой может быть временно «сжат» до пустого состояния, однако внутренняя модель маски продолжает существовать.

Поведение при программном фокусе

При вызове:

element.focus();

логика остаётся идентичной пользовательскому фокусу:

  • событие focus инициирует пересчёт отображения
  • применяется showMaskOnFocus
  • маска либо отображается, либо скрывается

Это важно для динамических интерфейсов, где поля активируются автоматически (например, в многошаговых формах).

Работа с динамическими значениями

При изменении value программно во время фокуса:

  • при showMaskOnFocus: true новое значение сразу форматируется по маске
  • при false значение может отображаться без визуального шаблона до следующего ввода

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

Поведение при пустых значениях

Пустое поле — наиболее чувствительный сценарий для showMaskOnFocus.

  • true отображается полная структура маски с placeholder-символами

  • false поле может выглядеть как абсолютно пустое, без визуального шаблона

Это различие определяет степень «навигационной подсказки» в интерфейсе.

Типичные сценарии использования

Различные значения применяются в зависимости от модели интерфейса:

  • формы с жёстким форматом ввода используют true
  • минималистичные интерфейсы используют false
  • гибридные системы комбинируют showMaskOnFocus с hover-поведеним

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

Оглавление