Переключение между локалями

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

В AutoNumeric локаль не является отдельной сущностью уровня «locale string» в духе ru-RU или en-US. Вместо этого используется конфигурационный объект, определяющий правила форматирования:

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

Типовая локализация может быть представлена следующим образом:

const localeUS = {
  digitGroupSeparator: ',',
  decimalCharacter: '.',
  decimalCharacterAlternative: '.',
  currencySymbol: '$',
  currencySymbolPlacement: 'p',
  negativeSignCharacter: '-'
};

const localeEU = {
  digitGroupSeparator: '.',
  decimalCharacter: ',',
  decimalCharacterAlternative: ',',
  currencySymbol: '€',
  currencySymbolPlacement: 's',
  negativeSignCharacter: '-'
};

Несмотря на внешнюю простоту, эти параметры определяют всю модель взаимодействия пользователя с числовым вводом.

Внутреннее представление и независимость от локали

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

  • 12,345.67 (US формат)
  • 12.345,67 (EU формат)

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

Базовый механизм переключения конфигурации

Переключение локали осуществляется через обновление конфигурации уже существующего экземпляра AutoNumeric. Основной принцип — повторное применение параметров форматирования:

const anElement = new AutoNumeric('#input', localeUS);

// переключение на европейский формат
anElement.update(localeEU);

Метод обновления пересчитывает текущее значение и перерисовывает содержимое input без потери данных.

Переключение через предопределённые профили

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

const locales = {
  us: {
    digitGroupSeparator: ',',
    decimalCharacter: '.',
    currencySymbol: '$',
    currencySymbolPlacement: 'p'
  },
  de: {
    digitGroupSeparator: '.',
    decimalCharacter: ',',
    currencySymbol: '€',
    currencySymbolPlacement: 's'
  },
  fr: {
    digitGroupSeparator: ' ',
    decimalCharacter: ',',
    currencySymbol: '€',
    currencySymbolPlacement: 's'
  }
};

Дальнейшее переключение сводится к выбору объекта конфигурации:

function switchLocale(anElement, localeKey) {
  anElement.update(locales[localeKey]);
}

Переформатирование при смене локали

При смене локали важным этапом является перерасчёт текущего отображаемого значения. AutoNumeric выполняет следующие шаги:

  1. Считывание внутреннего числового значения.
  2. Применение новых правил форматирования.
  3. Пересборка строки отображения.
  4. Коррекция позиции курсора.

Этот процесс критичен для сохранения UX при активном вводе.

Обработка ввода при динамическом переключении

Особенность переключения локалей во время редактирования заключается в необходимости сохранения контекста ввода. Например, при наборе числа 1234.5 в американском формате и переключении на европейский формат возникает необходимость преобразования:

  • 1,234.5 → 1.234,5

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

Работа с альтернативными символами ввода

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

decimalCharacterAlternative: ','

Это позволяет вводить число 12.5 или 12,5 в зависимости от клавиатурной раскладки, при этом внутреннее значение остаётся одинаковым. При переключении локали этот механизм сохраняется, что предотвращает ошибки парсинга.

Динамическое переключение в коллекции полей

В сценариях с несколькими полями применяется групповое обновление экземпляров AutoNumeric:

const instances = AutoNumeric.multiple('.price-input', localeUS);

function switchAllLocales(localeConfig) {
  instances.forEach(instance => {
    instance.update(localeConfig);
  });
}

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

Интеграция локалей с бизнес-логикой

Часто переключение локали связано не только с UI, но и с правилами обработки данных. Например:

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

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

Поведение при частичной инициализации

Если локаль изменяется до инициализации экземпляра, параметры применяются при создании:

const anElement = new AutoNumeric('#input', locales.de);

Если локаль изменяется после инициализации, используется обновление:

anElement.update(locales.fr);

Разница между этими подходами заключается в моменте пересчёта DOM-значения и позиции курсора.

Стабильность значений при множественных переключениях

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

внутреннее число → формат локали → отображение

без обратного накопления преобразований строки.

Ограничения и особенности поведения

При сложных сценариях могут проявляться особенности:

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

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

Синхронизация локали с внешними источниками

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

fetch('/api/user-settings')
  .then(res => res.json())
  .then(settings => {
    anElement.update(locales[settings.locale]);
  });

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

Поведение при смешанных форматах ввода

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

Это предотвращает накопление неконсистентных символов вроде одновременно присутствующих , и . в одном значении.

Изменение локали без потери фокуса

При смене локали важно, что элемент ввода остаётся в фокусе. Перерисовка значения выполняется без blur/focus событий, что позволяет сохранять непрерывность ввода и положение курсора. Это достигается через внутренние механизмы сохранения selection range до обновления и восстановления после форматирования.

Оглавление