rightAlign

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

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

Поведение при включённом правом выравнивании

При активированном режиме заполнение поля меняет характер:

  • символы вводятся начиная с правой стороны маски;
  • свободные позиции располагаются слева;
  • курсор визуально «двигается влево» по мере заполнения;
  • маска фиксированной длины начинает вести себя как числовой разрядный контейнер;
  • пустые позиции заполняются placeholder-символами или остаются визуально пустыми в зависимости от конфигурации.

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

Базовая конфигурация

Режим правого выравнивания задаётся параметром конфигурации маски:

Inputmask("999999").mask(element);
Inputmask({
  mask: "999999",
  rightAlign: true
}).mask(element);

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

Влияние на цифровые маски

Наиболее выраженный эффект наблюдается при работе с числовыми шаблонами:

Inputmask({
  mask: "999.999.999",
  rightAlign: true
}).mask(element);

Поведение при вводе:

  • ввод 1 отображается как 1
  • ввод 123 отображается как 123
  • ввод 123456 отображается как 123.456

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

Совместимость с placeholder и пустыми значениями

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

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

Пример:

Inputmask({
  mask: "99/99/9999",
  rightAlign: true,
  placeholder: "_"
}).mask(element);

Результат до ввода может выглядеть как:

__/__/____

но визуально прижатым к правому краю поля.

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

Правое выравнивание напрямую влияет на позицию каретки:

  • курсор не остаётся фиксированным в начале строки;
  • перемещение происходит от правого края к левому по мере заполнения;
  • вставка символов учитывает разрядную структуру маски;
  • удаление символов перестраивает отображение справа налево.

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

Взаимодействие с числовыми масками

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

Inputmask({
  alias: "numeric",
  rightAlign: true,
  digits: 2,
  groupSeparator: " ",
  autoGroup: true
}).mask(element);

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

  • дробная часть фиксируется справа;
  • целая часть растёт слева;
  • разделитель групп формируется динамически;
  • ввод «смещает» значение влево при переполнении разрядов.

Влияние на автоформатирование групп

При включённом режиме группировки цифр форматирование выполняется с конца числа:

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

Пример поведения:

ввод: 1 → 1
ввод: 12 → 12
ввод: 123 → 123
ввод: 1234 → 1 234
ввод: 1234567 → 1 234 567

Особенности вставки и удаления

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

Вставка:

  • новые символы добавляются в младшие разряды;
  • существующее значение сдвигается влево;
  • маска перераспределяет символы по позициям.

Удаление:

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

Сочетание с необязательными цифрами

При использовании необязательных символов маски эффект становится более гибким:

Inputmask({
  mask: "[9][9][9][9][9]",
  rightAlign: true
}).mask(element);

В таком случае:

  • поле ведёт себя как переменной длины число;
  • заполнение всё равно идёт от правого края;
  • пустые позиции остаются слева и не участвуют в вводе.

Ограничения и особенности реализации

Режим правого выравнивания накладывает ряд ограничений:

  • менее предсказуемое поведение при произвольной вставке текста;
  • повышенная сложность обработки курсора при комбинированных масках;
  • необходимость корректной синхронизации при программном setValue;
  • различия поведения между текстовыми и числовыми alias-режимами.

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

Программное управление значением

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

const im = new Inputmask({
  mask: "999999",
  rightAlign: true
}).mask(element);

element.inputmask.setValue("123");

Результат:

   123

При этом внутреннее представление остаётся нормализованным числовым значением без пробелов.

Сценарии применения

Наиболее устойчивые сценарии использования включают:

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

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

Оглавление