Направление ввода (RTL/LTR)

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

Базовые принципы направления текста

В веб-интерфейсах используется две основные модели направления:

LTR (Left-to-Right) Традиционное направление для латиницы и большинства европейских языков. Символы добавляются слева направо, каретка движется вправо.

RTL (Right-to-Left) Используется в арабском, иврите, персидском и ряде других письменностей. Ввод начинается справа, а визуальное направление текста инвертируется относительно LTR.

HTML-атрибут dir определяет направление отображения:

<input dir="ltr">
<input dir="rtl">

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

Влияние направления на поведение маски

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

  • смещение позиции каретки при вставке символов
  • инверсия логики заполнения маски
  • некорректное отображение разделителей (например, пробелов или дефисов)
  • конфликт между визуальным RTL и внутренним LTR-алгоритмом

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

rightAlign: выравнивание как основа RTL-поведения

Ключевой параметр, влияющий на визуальное направление в масках — rightAlign.

Inputmask("999 999 999").mask(selector, {
  rightAlign: true
});

При включении:

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

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

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

numericInput: инверсия логики для чисел

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

Inputmask("9{1,3}[.99]").mask(selector, {
  numericInput: true
});

Поведение:

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

Это особенно важно для:

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

RTL-локализация и маски

При работе с RTL-языками стандартного dir="rtl" недостаточно. Маска должна учитывать:

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

Пример HTML:

<input id="phone" dir="rtl">

Пример маски:

Inputmask("+99 999 999 999").mask("#phone");

Без дополнительных настроек поведение может оставаться LTR по логике ввода, несмотря на RTL-отображение.

Комбинация rightAlign и numericInput

Совместное использование двух параметров применяется для финансовых интерфейсов:

Inputmask("currency", {
  rightAlign: true,
  numericInput: true
}).mask(selector);

Результат:

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

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

Управление кареткой в RTL/LTR сценариях

Каретка (cursor) в маскированных полях является наиболее чувствительным элементом при смене направления.

В LTR:

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

В RTL:

  • визуальное движение может быть инвертировано
  • позиция каретки зависит от CSS и JavaScript-логики

Inputmask использует внутренние механизмы позиционирования каретки, учитывая:

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

Влияние форматирующих символов

Разделители (пробелы, дефисы, скобки) ведут себя по-разному в зависимости от направления:

Тип символа LTR поведение RTL поведение
пробел добавляется справа может визуально смещаться влево
дефис фиксируется между сегментами сохраняет позицию, но инвертирует восприятие
скобки обрамляют слева направо могут требовать симметричной обработки

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

Работа с международными форматами

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

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

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

Типовые сценарии конфликтов направления

1. RTL-интерфейс + LTR-данные Поле отображается справа налево, но ввод остаётся LTR, что приводит к визуальному несоответствию.

2. numericInput без rightAlign Число вводится в обратном порядке, но остаётся левое выравнивание.

3. rightAlign без учета HTML dir Визуальное выравнивание корректно, но каретка ведёт себя нестабильно при вставке.

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

Корректная работа направления в масках обычно строится по слоям:

  • HTML (dir) задаёт базовую визуальную ориентацию
  • CSS управляет выравниванием и отображением текста
  • Inputmask управляет логикой ввода
  • параметры rightAlign и numericInput корректируют поведение каретки и порядка ввода

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

Оглавление