Настройка локали

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

Ключевая идея локализации заключается в том, что один и тот же тип данных может иметь разные представления:

  • десятичный разделитель (. или ,)
  • разделитель групп разрядов (, ,, .)
  • формат даты (DD.MM.YYYY, MM/DD/YYYY, YYYY-MM-DD)
  • обозначения валют и их расположение
  • допустимые алфавитные символы для пользовательского ввода

Inputmask не оперирует «локалью» как единым объектом, вместо этого локализация раскладывается на набор параметров маски и алиасов.

Числовая локализация и алиас numeric

Наиболее типичный сценарий локализации связан с числовым вводом. Алиас numeric позволяет настраивать ключевые параметры:

  • radixPoint — символ десятичного разделителя
  • groupSeparator — разделитель групп разрядов
  • digits — количество знаков после запятой
  • autoGroup — автоматическая группировка чисел
  • allowMinus — поддержка отрицательных значений

Пример адаптации под русскую локаль:

Inputmask("numeric", {
  radixPoint: ",",
  groupSeparator: " ",
  autoGroup: true,
  digits: 2,
  digitsOptional: false,
  placeholder: "0"
}).mask(element);

В данном случае формат числа становится совместимым с привычной записью 1 234 567,89.

Для англоязычной локали конфигурация будет противоположной:

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

Денежные форматы и валютная локализация

Алиас currency расширяет numeric, добавляя символ валюты и правила его позиционирования.

Основные параметры:

  • prefix — символ валюты перед числом
  • suffix — символ валюты после числа
  • rightAlign — выравнивание ввода
  • allowPlus / allowMinus — знаки

Локализация валютного ввода обычно зависит от региона:

Inputmask("currency", {
  prefix: "₽ ",
  groupSeparator: " ",
  radixPoint: ",",
  digits: 2
}).mask(element);

Для доллара:

Inputmask("currency", {
  prefix: "$ ",
  groupSeparator: ",",
  radixPoint: ".",
  digits: 2
}).mask(element);

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

Локализация даты и времени (datetime)

Алиас datetime является наиболее сложным с точки зрения локализации, так как включает:

  • формат ввода (inputFormat)
  • отображение месяцев и дней
  • разделители даты
  • 12/24-часовой формат
  • порядок компонентов даты

Пример европейского формата:

Inputmask("datetime", {
  inputFormat: "dd/mm/yyyy",
  placeholder: "dd/mm/yyyy"
}).mask(element);

Американский формат:

Inputmask("datetime", {
  inputFormat: "mm/dd/yyyy",
  placeholder: "mm/dd/yyyy"
}).mask(element);

ISO-подобный формат:

Inputmask("datetime", {
  inputFormat: "yyyy-mm-dd"
}).mask(element);

Символы локали и поведение placeholder

Локализация часто затрагивает визуальные элементы маски:

  • символ заполнителя (placeholder)
  • символы маски (_, *, 0)
  • поведение при неполном вводе

Пример:

Inputmask("numeric", {
  placeholder: "_",
  showMaskOnHover: false,
  showMaskOnFocus: true
}).mask(element);

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

Пользовательские definitions как основа локализации

Более глубокая локализация достигается через расширение definitions. Это позволяет менять допустимые символы в маске.

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

Inputmask.extendDefinitions({
  "c": {
    validator: "[А-Яа-яЁё]",
    casing: "upper"
  }
});

После этого маска может использовать новый токен:

Inputmask("ccc-999").mask(element);

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

Алиасы как слой локализации поведения

Inputmask использует систему алиасов как промежуточный слой между «сырой маской» и готовым поведением.

Алиасы позволяют:

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

Пример расширения алиаса:

Inputmask.extendAliases({
  "ru-numeric": {
    alias: "numeric",
    groupSeparator: " ",
    radixPoint: ",",
    autoGroup: true
  }
});

Использование:

Inputmask("ru-numeric").mask(element);

Такой подход фактически создаёт локаль уровня приложения.

Разделители и региональные соглашения

Одним из наиболее критичных аспектов локализации являются разделители:

  • десятичный разделитель
  • разделитель тысяч
  • разделитель даты
  • разделитель времени

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

Пример комбинированной настройки:

Inputmask("numeric", {
  radixPoint: ",",
  groupSeparator: ".",
  autoGroup: true
}).mask(element);

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

Кастомные локализационные профили

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

const locales = {
  ru: {
    numeric: {
      radixPoint: ",",
      groupSeparator: " "
    },
    currency: {
      prefix: "₽ "
    }
  },
  en: {
    numeric: {
      radixPoint: ".",
      groupSeparator: ","
    },
    currency: {
      prefix: "$ "
    }
  }
};

Далее конфигурация применяется динамически:

function applyLocale(locale) {
  Inputmask.extendAliases({
    "app-numeric": {
      alias: "numeric",
      ...locales[locale].numeric
    }
  });
}

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

Локализация и валидация ввода

Локализация влияет не только на отображение, но и на допустимые значения:

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

Inputmask реализует это через комбинацию validator, definition и prevalidator, которые могут быть переопределены в зависимости от локали.

Особенности интеграции локалей в динамических формах

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

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

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

Inputmask.remove(element);
Inputmask(newAliasOrOptions).mask(element);

Это обеспечивает корректное пересчитывание всех правил форматирования.

Ограничения локализационного подхода Inputmask

Несмотря на гибкость, локализация в Inputmask имеет ряд особенностей архитектуры:

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

Это делает систему мощной, но зависимой от точности конфигурации на уровне разработчика.

Оглавление