Префиксы и суффиксы

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

Внутренне Inputmask разделяет содержимое поля на три логические зоны:

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

Такая сегментация позволяет отделить данные пользователя от декоративных или форматирующих элементов, сохраняя при этом единое строковое представление в input-элементе.

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

Опция prefix

Префикс задаётся через параметр prefix и представляет собой строку, автоматически добавляемую в начало значения поля.

Inputmask({
  alias: "numeric",
  prefix: "$ "
}).mask(document.querySelector("input"));

В данном случае любое вводимое число визуально будет отображаться с символом валюты в начале:

$ 1250

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

Префикс обладает следующими характеристиками:

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

Опция suffix

Суффикс задаётся через параметр suffix и добавляется в конец строки значения.

Inputmask({
  alias: "numeric",
  suffix: " kg"
}).mask(document.querySelector("input"));

Результат отображения:

75 kg

Поведение суффикса

Суффикс аналогично префиксу обладает фиксированным поведением:

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

Влияние на позиционирование курсора

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

Особенности поведения:

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

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

Сочетание с числовыми масками (numeric alias)

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

Inputmask({
  alias: "numeric",
  digits: 2,
  radixPoint: ".",
  prefix: "€ ",
  suffix: " EUR"
}).mask(input);

Формируемое отображение:

€ 1200.50 EUR

В данном случае:

  • prefix задаёт валютный символ в начале
  • suffix фиксирует обозначение валюты в конце
  • числовая часть остаётся единственной редактируемой зоной

Удаление маски и получение значения

При извлечении данных через API Inputmask фиксированные элементы автоматически исключаются.

unmaskedvalue

const value = input.inputmask.unmaskedvalue();

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

€ 1200.50 EUR

результат будет:

1200.50

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

Поведение при очистке поля

При частичной или полной очистке значения фиксированные части остаются неизменными.

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

Inputmask({
  alias: "numeric",
  prefix: "$ "
}).mask(input);

При удалении всех цифр поле отображает:

$

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

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

Опция rightAlign влияет на визуальное расположение числовой части относительно префикса и суффикса.

Inputmask({
  alias: "numeric",
  prefix: "$ ",
  rightAlign: true
}).mask(input);

При включённом rightAlign:

  • числовая часть выравнивается по правому краю
  • префикс остаётся слева
  • визуально создаётся эффект «финансового поля»

Суффикс при этом фиксируется справа за пределами выравнивания и не участвует в смещении содержимого.

Ограничение редактирования фиксированных зон

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

Механизм включает:

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

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

Поведение при вставке текста

При вставке строки через clipboard Inputmask анализирует содержимое и отделяет фиксированные элементы от данных.

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

  • игнорируются при парсинге
  • не дублируются в поле
  • удаляются при нормализации значения

Например, при вставке:

$ 500 USD

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

500

Комбинация с другими форматирующими опциями

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

  • groupSeparator для разбиения разрядов
  • digits и digitsOptional для дробной части
  • autoGroup для автоматической группировки чисел
Inputmask({
  alias: "numeric",
  prefix: "£ ",
  groupSeparator: ",",
  digits: 0
}).mask(input);

Результат:

£ 1,250,000

При этом фиксированные части остаются внешними по отношению к логике группировки.

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

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

Это приводит к следующим последствиям:

  • упрощённая обработка при рендеринге
  • отсутствие необходимости валидировать фиксированные сегменты
  • ускоренное сравнение состояния ввода

Ограничения и конфликтные сценарии

При использовании сложных масок возможны ограничения:

  • невозможность динамического изменения префикса без пересоздания маски
  • конфликт между длинным суффиксом и ограниченной шириной input
  • визуальное наложение при нестандартных CSS-стилях (особенно monospace и padding)

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

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

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

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

Оглавление