Кастомизация плейсхолдера

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

Базовый параметр placeholder

Основной механизм управления плейсхолдером задаётся через параметр placeholder. Он может принимать строковое значение, которое полностью заменяет стандартный символ маски.

Inputmask({
  mask: "+7 (999) 999-99-99",
  placeholder: "_"
}).mask(input);

В данном случае символ _ используется как заполнитель для всех незаполненных позиций маски.

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

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

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

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

Использование разных символов заполнения

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

Inputmask({
  mask: "99/99/9999",
  placeholder: "•"
}).mask(input);

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

Влияние placeholder на структуру маски

Плейсхолдер не изменяет саму логику маски, но влияет на восприятие структуры. Маска остаётся фиксированной последовательностью токенов, а placeholder лишь заполняет незаполненные позиции.

Например:

mask: "AAA-999"
placeholder: "_"

Результат до ввода:

___-___

Каждый символ placeholder соответствует одному символу в маске, независимо от типа токена.

Динамическое поведение плейсхолдера

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

  • showMaskOnFocus
  • showMaskOnHover
Inputmask({
  mask: "+7 (999) 999-99-99",
  placeholder: "_",
  showMaskOnFocus: true,
  showMaskOnHover: false
}).mask(input);

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

Различие placeholder и масочного символа

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

Ключевые различия:

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

Поддержка пользовательских масок с собственными плейсхолдерами

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

Inputmask({
  mask: "AA-9999-XX",
  definitions: {
    "A": { validator: "[A-Z]" },
    "X": { validator: "[0-9A-Z]" }
  },
  placeholder: "-"
}).mask(input);

В данном случае символ - используется для всех незаполненных позиций, независимо от типа определения токена.

Взаимодействие с автозаполнением и редактированием

При активной работе с вводом плейсхолдер динамически исчезает и появляется в зависимости от состояния поля. Поведение зависит от режима вставки и очистки:

  • при частичном вводе placeholder заменяется введёнными символами
  • при удалении символов плейсхолдер восстанавливается
  • при полном очищении поля восстанавливается исходная маска

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

Плейсхолдер и незавершённые значения

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

При маске:

9999-9999-9999-9999

и placeholder _:

1234-5678-____-____

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

Совмещение placeholder с режимами отображения маски

Параметры отображения могут комбинироваться, формируя различные UX-паттерны:

Inputmask({
  mask: "99.99.9999",
  placeholder: "_",
  showMaskOnHover: true,
  showMaskOnFocus: true,
  clearIncomplete: true
}).mask(input);

Такое сочетание обеспечивает:

  • видимость структуры при взаимодействии
  • скрытие маски в статичном состоянии
  • автоматическую очистку незавершённых значений

Поведение placeholder при программном вводе

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

const im = Inputmask("9999-9999");
im.mask(input);

input.value = "1234";

Результат:

1234-____

Использование placeholder в сложных форматах

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

Пример даты:

Inputmask({
  mask: "99/99/9999",
  placeholder: "_"
});

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

__/__/____

Такая структура позволяет визуально выделить отдельные части поля без дополнительных элементов интерфейса.

Особенности визуальной консистентности

Единый плейсхолдер по всей маске обеспечивает предсказуемость восприятия, однако в некоторых интерфейсах используется стратегическое различие символов (например, разные placeholder для разных полей формы). Inputmask при этом не ограничивает вариативность и позволяет задавать индивидуальные значения для каждого инстанса маски.

Оглавление