Разделители тысяч и десятичных знаков

Работа с числовыми полями ввода в веб-приложениях требует строгого контроля формата отображения. Пользовательский ввод чисел без форматирования быстро становится нечитаемым при увеличении разрядности, особенно в финансовых, аналитических и статистических интерфейсах. Cleave.js предоставляет встроенные механизмы для автоматической вставки разделителей тысяч и управления десятичной частью без необходимости ручной обработки строки.

Базовая концепция числового форматирования

Cleave.js работает по принципу преобразования «сырых» символов ввода в отформатированное значение в реальном времени. Для чисел это означает:

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

Ключевой режим работы активируется через numeral: true, который включает числовой парсер Cleave.

const cleave = new Cleave(inputElement, {
    numeral: true
});

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

Разделители тысяч

Разделитель тысяч отвечает за визуальное группирование разрядов числа. В зависимости от локали это может быть запятая, пробел или точка.

Базовое поведение

При включённом числовом режиме Cleave.js автоматически вставляет разделители:

const cleave = new Cleave(inputElement, {
    numeral: true,
    numeralThousandsGroupStyle: 'thousand'
});

Пример поведения:

  • ввод: 1000

  • отображение: 1,000

  • ввод: 1000000

  • отображение: 1,000,000

Поддерживаемые стили группировки

Параметр numeralThousandsGroupStyle управляет стратегией группировки:

thousand

Классическая западная система группировки по три цифры.

numeralThousandsGroupStyle: 'thousand'

Результат:

  • 1234567 → 1,234,567

lakh

Используется в индийской системе чисел.

numeralThousandsGroupStyle: 'lakh'

Результат:

  • 1234567 → 12,34,567

wan

Китайская система группировки.

numeralThousandsGroupStyle: 'wan'

Результат:

  • 12345678 → 1,2345,678

Десятичные знаки

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

Включение поддержки дробных чисел

const cleave = new Cleave(inputElement, {
    numeral: true,
    numeralDecimalMark: '.'
});

Здесь numeralDecimalMark определяет символ разделителя.

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

Для ограничения точности используется параметр numeralDecimalScale.

const cleave = new Cleave(inputElement, {
    numeral: true,
    numeralDecimalMark: '.',
    numeralDecimalScale: 2
});

Поведение:

  • ввод: 12.3456
  • отображение: 12.34

Обрезка происходит автоматически без округления на уровне отображения (в зависимости от версии и настроек Cleave.js поведение может отличаться).

Комбинированное форматирование: тысячи + дробная часть

Наиболее распространённый сценарий — одновременная работа с тысячами и десятичными значениями.

const cleave = new Cleave(inputElement, {
    numeral: true,
    numeralThousandsGroupStyle: 'thousand',
    numeralDecimalMark: '.',
    numeralDecimalScale: 2
});

Пример:

  • ввод: 1234567.89
  • отображение: 1,234,567.89

Такой формат часто используется в:

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

Локализация разделителей

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

  • запятая как разделитель тысяч и точка как десятичный разделитель (США)
  • пробел как разделитель тысяч и запятая как десятичный (Европа)
  • вариативные локальные стандарты

Cleave.js позволяет адаптировать отображение через numeralDecimalMark, но разделитель тысяч задаётся косвенно через стиль группировки и локаль UI.

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

const cleave = new Cleave(inputElement, {
    numeral: true,
    numeralThousandsGroupStyle: 'thousand',
    numeralDecimalMark: ','
});

Результат:

  • 1234567,89 → 1,234,567,89

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

Cleave.js обрабатывает ввод постсимвольным образом. Это означает:

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

Особенность числового режима — нормализация строки после каждого изменения.

Вставка значений

При вставке текста из буфера обмена Cleave.js:

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

Пример:

  • вставка: 1 234 567.89 USD
  • результат: 1,234,567.89

Ограничения и особенности обработки

1. Запрещённые символы

В числовом режиме автоматически игнорируются:

  • буквы
  • специальные символы
  • дополнительные точки (кроме первой допустимой)

2. Несколько десятичных точек

Если пользователь вводит 12.3.4, библиотека:

  • оставляет первую точку
  • игнорирует последующие

Результат: 12.34 или 12.3 в зависимости от конфигурации.

3. Начальные нули

Cleave.js нормализует ввод:

  • 000123 → 123

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

Совместная работа с prefix и suffix

Часто числовые поля требуют добавления валютных или единичных обозначений.

const cleave = new Cleave(inputElement, {
    numeral: true,
    prefix: '$',
    numeralThousandsGroupStyle: 'thousand'
});

Результат:

  • 1234 → $1,234

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

Динамическое изменение формата

Cleave.js позволяет изменять параметры после инициализации:

cleave.setRawValue('1000000');

cleave.properties.numeralDecimalScale = 3;
cleave.properties.numeralThousandsGroupStyle = 'lakh';

cleave._onChange();

Это используется при переключении локалей или режимов отображения без пересоздания инстанса.

Обработка отрицательных чисел

Числовой режим поддерживает отрицательные значения:

  • ввод: -1234
  • отображение: -1,234

Минус сохраняется в начале строки и не влияет на группировку.

Производительность при больших значениях

При работе с длинными числами (10+ разрядов):

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

Оптимизация достигается за счёт:

  • ограничения numeralDecimalScale
  • минимизации переформатирования при программном изменении значения
  • избегания частых вызовов _onChange()

Взаимодействие с form validation

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

  • 1,234 остаётся строкой
  • валидация должна выполняться отдельно

Частая практика:

  • Cleave.js отвечает за UX
  • валидатор (например, HTML5, Yup, Joi) отвечает за логику

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

const rawValue = cleave.getRawValue();

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

В финансовых формах Cleave.js обеспечивает:

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

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

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

Сочетание с другими режимами Cleave.js

Числовой формат может использоваться параллельно с другими возможностями:

  • prefix/suffix
  • блокировка символов
  • кастомные обработчики событий

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

Оглавление