Плейсхолдеры и их настройка

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

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

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

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

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

Отображение плейсхолдера может зависеть от фокуса элемента и состояния ввода. Для этого используются параметры:

  • showMaskOnFocus — отображение маски при получении фокуса
  • showMaskOnHover — отображение маски при наведении курсора
  • clearMaskOnLostFocus — очистка незаполненных позиций при потере фокуса

Комбинация этих параметров позволяет тонко управлять тем, когда пользователь видит структуру маски.

Inputmask({
  mask: "(999) 999-9999",
  placeholder: "_",
  showMaskOnFocus: true,
  showMaskOnHover: false,
  clearMaskOnLostFocus: false
}).mask(input);

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

Плейсхолдер и определения символов маски

Inputmask использует систему definitions, которая определяет поведение каждого символа маски. Каждый символ может обозначать набор допустимых значений. Например, 9 — цифра, a — буква, * — алфавитно-цифровой символ.

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

Inputmask({
  mask: "aaa-999",
  definitions: {
    "a": {
      validator: "[A-Za-z]",
      cardinality: 1
    }
  },
  placeholder: "_"
}).mask(input);

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

Символьная подстановка и поведение незаполненных позиций

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

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

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

Персонализация символа плейсхолдера

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

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

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

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

Поведение плейсхолдера при удалении и редактировании

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

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

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

Маски с необязательными сегментами и плейсхолдер

При использовании необязательных сегментов ([]) плейсхолдер ведёт себя более гибко. Незадействованные части маски могут полностью скрываться или отображаться частично, в зависимости от конфигурации.

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

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

Маскирование и пустые значения

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

  • визуально отображается полная маска
  • все позиции заполнены символом плейсхолдера
  • реальное значение остаётся пустой строкой (если не задано иное поведение)

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

Связь плейсхолдера и автозаполнения

При автозаполнении (autocomplete) браузера Inputmask перерасчитывает позиции плейсхолдера. Если данные вставляются целиком:

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

Это важно при вставке номеров телефонов, дат или идентификаторов из буфера обмена.

Плейсхолдер в числовых и специализированных масках

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

Inputmask({
  alias: "decimal",
  digits: 2,
  placeholder: "0"
}).mask(input);

Здесь плейсхолдер 0 создаёт эффект фиксированной числовой структуры, где не заполненные разряды визуально выглядят как нули. Это может использоваться в финансовых интерфейсах, но требует осторожности, так как визуальное и фактическое значение могут восприниматься по-разному.

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

Inputmask позволяет изменять параметры маски после инициализации. При изменении placeholder маска может быть перерасчитана без повторного создания экземпляра.

const im = new Inputmask({
  mask: "9999-9999",
  placeholder: "_"
});

im.mask(input);

im.option({
  placeholder: "*"
});

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

Влияние RTL-режима на плейсхолдер

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

Inputmask({
  mask: "999-999",
  rightToLeft: true,
  placeholder: "_"
}).mask(input);

Здесь заполнение начинается с правой стороны, а плейсхолдеры перераспределяются соответственно направлению ввода.

Очистка и плейсхолдер при потере фокуса

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

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

При отключённой очистке:

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

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

Плейсхолдер и производные алиасы

В предустановленных алиасах Inputmask (date, datetime, phone) плейсхолдер часто переопределяется автоматически, чтобы соответствовать формату данных. Например, для даты может использоваться dd/mm/yyyy-структура с собственным отображением незаполненных позиций.

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

Итеративное заполнение и перерасчёт плейсхолдера

При пошаговом вводе Inputmask постоянно перерасчитывает:

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

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

Оглавление