Обновление разделителей

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

Основные типы разделителей

В контексте AutoNumeric используются два фундаментальных параметра:

  • decimalCharacter — символ десятичного разделителя
  • digitGroupSeparator — символ группировки разрядов

Эти параметры определяют, как число выглядит в поле ввода:

  • 1234567.89 → 1,234,567.89 (стандартный формат)
  • 1234567.89 → 1 234 567,89 (европейский формат)
  • 1234567.89 → 1.234.567,89 (альтернативный вариант)

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

Поведение при изменении разделителей

Изменение разделителей в AutoNumeric не является простым «замещением символов в строке». Внутри библиотеки происходит:

  • извлечение unformatted значения (чистого числа)
  • пересчёт форматирования по новым правилам
  • перерисовка значения в input
  • корректировка позиции курсора (если поле активно)

Это важно, потому что прямое изменение текста input без пересчёта привело бы к нарушению числовой целостности.

Инициализация с заданными разделителями

Базовый способ задания разделителей — передача параметров при создании экземпляра:

const anElement = new AutoNumeric('#price', {
    digitGroupSeparator: ' ',
    decimalCharacter: ','
});

В этом случае все последующие операции уже будут учитывать заданный формат.

Динамическое обновление разделителей

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

AutoNumeric поддерживает изменение конфигурации без повторного создания экземпляра.

Подход через обновление опций экземпляра

const anElement = AutoNumeric.getAutoNumericElement('#price');

anElement.update({
    digitGroupSeparator: ',',
    decimalCharacter: '.'
});

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

Влияние обновления на текущее значение

При изменении разделителей важно понимать различие между двумя уровнями данных:

  • formatted value — значение в поле ввода
  • unformatted value — числовое значение без оформления

AutoNumeric всегда сохраняет unformatted значение неизменным, даже если формат меняется.

Пример:

// было: "1 234 567,89"
anElement.update({
    digitGroupSeparator: ',',
    decimalCharacter: '.'
});

// стало: "1,234,567.89"

При этом внутреннее значение остаётся 1234567.89.

Обновление через повторную инициализацию

В некоторых конфигурациях (особенно при сложных массивах элементов) применяется стратегия полной переинициализации:

AutoNumeric.remove('#price');

new AutoNumeric('#price', {
    digitGroupSeparator: '.',
    decimalCharacter: ','
});

Такой подход используется, когда:

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

Обновление разделителей в множественных инстансах

При работе с multiple-инициализацией изменения применяются ко всем связанным полям:

const list = AutoNumeric.multiple('.price-field', {
    digitGroupSeparator: ' ',
    decimalCharacter: ','
});

list.forEach(an => {
    an.update({
        digitGroupSeparator: ',',
        decimalCharacter: '.'
    });
});

Это позволяет централизованно переключать формат отображения сразу в нескольких input-элементах.

Переключение локалей через разделители

Часто обновление разделителей используется как упрощённый механизм смены локали.

Примеры соответствий:

  • США: 1,234,567.89
  • Германия: 1.234.567,89
  • Франция: 1 234 567,89

Реализация через AutoNumeric:

function setLocale(an, locale) {
    switch (locale) {
        case 'en-US':
            an.update({
                digitGroupSeparator: ',',
                decimalCharacter: '.'
            });
            break;

        case 'de-DE':
            an.update({
                digitGroupSeparator: '.',
                decimalCharacter: ','
            });
            break;

        case 'fr-FR':
            an.update({
                digitGroupSeparator: ' ',
                decimalCharacter: ','
            });
            break;
    }
}

Влияние на ввод пользователя

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

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

Например, при смене decimalCharacter с . на ,:

  • пользователь вводит 1234.5
  • после обновления отображение становится 1 234,5
  • позиция курсора сохраняется максимально близко к исходной

Обновление без визуального рефлеша

AutoNumeric оптимизирует перерисовку значения. При изменении разделителей:

  • DOM обновляется минимально
  • значение не «мигает»
  • повторная валидация выполняется один раз

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

Особенности работы с альтернативным десятичным символом

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

{
    decimalCharacter: ',',
    decimalCharacterAlternative: '.'
}

При обновлении разделителей необходимо учитывать оба параметра:

anElement.update({
    decimalCharacter: '.',
    decimalCharacterAlternative: ','
});

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

Синхронизация с внешними форматами данных

При обновлении разделителей важно учитывать взаимодействие с сервером.

AutoNumeric всегда отправляет:

  • unformatted value (чистое число)

Пример:

anElement.update({
    digitGroupSeparator: ' ',
    decimalCharacter: ','
});

Отправка на сервер остаётся:

1234567.89

Это означает, что изменение разделителей влияет только на UI-слой и не затрагивает слой данных.

Динамическое связывание с настройками приложения

В SPA-приложениях разделители часто привязываются к состоянию:

state.currencyFormat = {
    digitGroupSeparator: ' ',
    decimalCharacter: ','
};

function applyFormat(an) {
    an.update(state.currencyFormat);
}

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

Ограничения при обновлении разделителей

Несмотря на гибкость, существуют ограничения:

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

Поведение при некорректной конфигурации

Если заданы некорректные разделители, AutoNumeric:

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

Пример ситуации:

anElement.update({
    decimalCharacter: ',',
    digitGroupSeparator: ','
});

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

Итоговые механизмы обновления

Обновление разделителей в AutoNumeric строится на трёх уровнях:

  • конфигурация экземпляра
  • перерасчёт формата на основе unformatted значения
  • синхронизация отображения и позиции курсора

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

Оглавление