Европейский формат

Европейский числовой формат в веб-интерфейсах обычно характеризуется использованием запятой в качестве десятичного разделителя и точки или пробела для группировки разрядов. На практике встречаются варианты:

  • 1.234.567,89 (Германия, Россия, большинство стран Европы с запятой как decimal)
  • 1 234 567,89 (Франция и ряд франкоязычных регионов)
  • 1.234.567,89 (смешанные корпоративные стандарты)

Браузерные <input> по умолчанию не поддерживают строгую локализацию числового ввода, поэтому требуется программный слой, который обеспечивает:

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

AutoNumeric решает эти задачи за счёт перехвата ввода и применения правил форматирования поверх стандартного input-элемента.

Базовая настройка AutoNumeric под европейский формат

Основная идея заключается в явном указании разделителей:

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

Пример инициализации:

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

В этом случае ввод 1234567.89 будет отображаться как 1.234.567,89.

Ключевое поведение:

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

Разделители и их роль в европейских локалях

AutoNumeric оперирует двумя основными символами форматирования:

decimalCharacter Определяет символ отделения дробной части.

digitGroupSeparator Определяет символ группировки разрядов.

Типичные комбинации:

Регион decimalCharacter digitGroupSeparator
Германия , .
Франция ,
Россия (часто в UI) , или .
Великобритания . ,

Пример конфигурации для французского стиля:

new AutoNumeric('#amount', {
    decimalCharacter: ',',
    digitGroupSeparator: ' ',
    decimalPlaces: 2
});

Поведение ввода и нормализация данных

AutoNumeric не просто форматирует отображение, а активно управляет вводом:

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

При вводе 1234,56:

  1. символ , фиксируется как десятичный;
  2. дробная часть ограничивается decimalPlaces;
  3. отображение преобразуется в 1 234,56 или 1.234,56 в зависимости от конфигурации.

Особое значение имеет нормализация paste-событий. При вставке строки:

"1,234.56"

в европейском режиме она будет интерпретирована согласно настройкам локали, а не как буквальная строка.

Настройки точности и округления

В европейских финансовых интерфейсах часто требуется строгая точность:

new AutoNumeric('#sum', {
    decimalCharacter: ',',
    digitGroupSeparator: '.',
    decimalPlaces: 2,
    roundingMethod: 'S',
    minimumValue: '0'
});

roundingMethod управляет стратегией округления:

  • S — half-up (стандартное банковское округление)
  • U — округление вверх
  • D — округление вниз
  • F — округление к нулю

Пример:

  • ввод: 10,556
  • результат при decimalPlaces: 2 и S: 10,56

Работа с пробелами как разделителями

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

new AutoNumeric('#field', {
    decimalCharacter: ',',
    digitGroupSeparator: '\u202F' // narrow no-break space
});

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

Импорт и экспорт значений

AutoNumeric разделяет:

  • форматированное отображение
  • чистое значение для логики

Получение значения:

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

const numericValue = an.getNumber(); // 1234567.89
const formattedValue = an.getString(); // "1.234.567,89"

Для отправки формы почти всегда используется getNumber() или getNumericString().

Пример подготовки payload:

const payload = {
    price: an.getNumber()
};

Это исключает проблемы серверного парсинга локализованных строк.

Ввод отрицательных чисел в европейском формате

AutoNumeric поддерживает несколько стратегий:

new AutoNumeric('#balance', {
    decimalCharacter: ',',
    digitGroupSeparator: '.',
    allowLeadingMinusSign: true
});

Поведение:

  • ввод -1234,5 → -1.234,50
  • знак минус фиксируется в начале числа
  • предотвращается множественное использование -

Ограничения диапазона значений

В финансовых интерфейсах важно ограничивать значения:

new AutoNumeric('#budget', {
    decimalCharacter: ',',
    digitGroupSeparator: '.',
    minimumValue: '0',
    maximumValue: '1000000'
});

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

  • ввод либо блокируется;
  • либо автоматически корректируется (в зависимости от конфигурации поведения).

Массовая инициализация полей

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

AutoNumeric.multiple('.currency-field', {
    decimalCharacter: ',',
    digitGroupSeparator: '.',
    decimalPlaces: 2
});

Такой подход обеспечивает единое поведение:

  • цены;
  • налоги;
  • скидки;
  • суммы итогов.

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

При работе с SPA интерфейсами (React, Vue, vanilla DOM manipulation) важно повторно инициализировать форматирование:

const el = document.createElement('input');
el.classList.add('currency-field');
document.body.appendChild(el);

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

AutoNumeric не «следит» за DOM автоматически, поэтому каждое новое поле требует инициализации.

Синхронизация с серверной моделью

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

  1. пользователь вводит 1.234,56;
  2. AutoNumeric хранит 1234.56;
  3. при отправке передаётся чистое число;
  4. сервер работает с float/decimal без локализации.

Критически важно избегать отправки строк:

"1.234,56" ❌
1234.56 ✔

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

AutoNumeric изменяет отображение в зависимости от состояния input:

  • при фокусе может показываться «сырой» ввод;
  • при blur — форматированное значение.

Пример:

new AutoNumeric('#field', {
    decimalCharacter: ',',
    digitGroupSeparator: '.',
    showOnlyNumbersOnFocus: false,
    selectOnFocus: true
});

Поведение:

  • фокус: 1234,56
  • blur: 1.234,56

Совместимость с HTML формами

AutoNumeric работает поверх стандартных <input> и не требует изменений HTML:

<input id="price" type="text" name="price">

При этом важно учитывать:

  • type="number" не рекомендуется, так как он конфликтует с локализацией;
  • type="text" является стандартом для AutoNumeric.

Типичные ошибки при европейской локализации

На практике часто встречаются проблемы:

1. Несовпадение decimalCharacter и серверного парсинга Сервер ожидает точку, клиент использует запятую.

2. Использование неподходящего разделителя групп Например, пробел в системах, где требуется точка.

3. Отправка форматированных строк вместо чисел

4. Конфликты с масками ввода Одновременное использование Inputmask и AutoNumeric приводит к борьбе за DOM-значение.

Интеграция с валютами в европейском формате

Хотя AutoNumeric не является валютной библиотекой, часто используется совместно с валютным отображением:

new AutoNumeric('#eur', {
    decimalCharacter: ',',
    digitGroupSeparator: '.',
    decimalPlaces: 2,
    currencySymbol: '€',
    currencySymbolPlacement: 's'
});

Результат отображения:

1.234,56 €

При этом символ валюты не влияет на числовое значение.

Поведение при копировании и вставке

AutoNumeric перехватывает clipboard-события:

  • вставка 1 234,56 → нормализация;
  • вставка 1.234.567,89 → интерпретация как европейский формат или очищение в зависимости от настроек;
  • копирование всегда может возвращать либо форматированное, либо чистое значение.

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

При десятках и сотнях полей:

  • используется единый конфиг;
  • минимизируется пересчёт DOM;
  • предпочтительна batch-инициализация через multiple.

Основная нагрузка возникает не в форматировании, а в обработке событий input и keydown.

Особенности работы в разных браузерах

  • Chrome: стабильная обработка курсора и input events;
  • Firefox: корректная работа с пробелами-разделителями;
  • Safari: иногда требует дополнительной обработки вставки;
  • Edge: поведение аналогично Chrome.

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

Гибридные локали и корпоративные стандарты

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

  • decimal: ,
  • group: ' или .
  • фиксированное число знаков

Пример:

new AutoNumeric('#corp', {
    decimalCharacter: ',',
    digitGroupSeparator: "'",
    decimalPlaces: 3
});

Результат:

1'234'567,890

Такой формат особенно распространён в банковских интерфейсах и ERP-системах.

Оглавление