placeholder и showMaskOnHover

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

Базовая роль placeholder

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

Пример базовой конфигурации:

Inputmask({
  mask: "9999-99-99",
  placeholder: "_"
}).mask("#date");

В данном случае поле ввода отображает структуру:

____-__-__

Каждый символ _ соответствует позиции, которую необходимо заполнить.

Пользовательские символы заполнителя

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

Inputmask({
  mask: "(999) 999-9999",
  placeholder: "*"
}).mask("#phone");

Отображение:

(***) ***-****

Также допустимо использование пробела:

Inputmask({
  mask: "9999 9999 9999 9999",
  placeholder: " "
}).mask("#card");

В этом случае визуальная структура маски становится менее выраженной, так как пробелы визуально сливаются с пустыми позициями.

Отключение placeholder

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

Inputmask({
  mask: "99/99/9999",
  placeholder: ""
}).mask("#date");

Поведение становится минималистичным: поле выглядит пустым до ввода данных, несмотря на наличие ограничений маски.

Взаимодействие placeholder и mask-char

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

  • 9 — числовой символ
  • a — буквенный символ
  • * — буквенно-цифровой символ

Каждая позиция маски, не заполненная пользователем, визуализируется через placeholder.

Поведение showMaskOnHover

Параметр showMaskOnHover управляет отображением маски при наведении курсора на поле ввода, когда поле находится в состоянии без фокуса. Этот механизм влияет на UX, позволяя временно демонстрировать структуру ввода без активного взаимодействия с полем.

Базовое поведение

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

Inputmask({
  mask: "9999-9999-9999-9999",
  showMaskOnHover: true
}).mask("#card");

В этом случае поле ведёт себя следующим образом:

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

Отключение отображения при наведении

Если параметр установлен в false, маска не раскрывается при hover-событиях:

Inputmask({
  mask: "999-99-9999",
  showMaskOnHover: false
}).mask("#ssn");

Поведение становится более «инертным»: структура маски отображается только при фокусе на поле (в зависимости от других параметров, например showMaskOnFocus).

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

showMaskOnHover часто рассматривается вместе с параметром showMaskOnFocus, который определяет поведение при активном вводе.

Комбинации:

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

Практическое влияние на UX

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

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

Совместное поведение placeholder и showMaskOnHover

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

Сценарий с активным placeholder и hover

Inputmask({
  mask: "9999-99-99",
  placeholder: "_",
  showMaskOnHover: true
}).mask("#date");

Поведение:

  • без взаимодействия: возможна частичная скрытость структуры
  • при наведении: отображается шаблон с _

Сценарий с пустым placeholder

Inputmask({
  mask: "9999-99-99",
  placeholder: "",
  showMaskOnHover: true
}).mask("#date");

Особенность:

  • структура маски при hover становится менее выраженной
  • визуальная подсказка почти отсутствует

Сценарий полной визуализации

Inputmask({
  mask: "(999) 999-9999",
  placeholder: "*",
  showMaskOnHover: true,
  showMaskOnFocus: true
}).mask("#phone");

Результат:

  • до взаимодействия: минимальная индикация
  • hover: полная структура с *
  • focus: активная подсветка всех позиций

Поведенческая модель отображения маски

Комбинация placeholder и showMaskOnHover формирует трёхуровневую модель визуализации:

  1. Статическое состояние

    • отсутствие взаимодействия
    • отображение зависит от placeholder

  2. Состояние наведения

    • активируется showMaskOnHover
    • раскрывается структура маски

  3. Состояние фокуса

    • управляется showMaskOnFocus
    • полная интерактивная модель ввода

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

Оглавление