Форматирование целых чисел

Работа с целыми числами в пользовательских формах требует строгого контроля ввода: разделение разрядов, запрет лишних символов, нормализация значения и предсказуемое отображение. В Cleave.js эта задача решается через режим numeral, который предназначен для числового форматирования и поддерживает работу как с целыми, так и с дробными числами, при этом позволяя жёстко ограничивать поведение ввода.

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

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

Для форматирования целых чисел используется опция:

  • numeral: true

После активации этого режима Cleave.js начинает интерпретировать ввод как число, автоматически удаляя недопустимые символы (буквы, пробелы, лишние знаки).

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

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

Ограничение до целых чисел

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

  • numeralDecimalScale: 0

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

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

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

Форматирование разрядов числа

Одна из ключевых задач — визуальное разделение тысяч. Cleave.js поддерживает несколько стратегий группировки:

  • thousand — стандартная группировка по 3 цифры
  • lakh — индийская система
  • wan — китайская система

Для типичного случая используется:

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

При вводе числа 1000000 оно автоматически отображается как 1,000,000.

Управление разделителем тысяч

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

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

Теперь число будет отображаться как 1 000 000.

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

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

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

Однако при необходимости можно контролировать допустимость отрицательных значений через пользовательскую логику:

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

inputElement.addEventListener('input', () => {
    if (inputElement.value.startsWith('--')) {
        inputElement.value = inputElement.value.replace('--', '-');
    }
});

Ограничение максимального числа разрядов

Для контроля длины целого числа используется:

  • numeralIntegerScale

Этот параметр задаёт максимальное количество цифр до разделителей.

const cleave = new Cleave(inputElement, {
    numeral: true,
    numeralDecimalScale: 0,
    numeralIntegerScale: 6
});

В данном случае пользователь не сможет ввести число больше шести цифр, например 999999.

Синхронизация отображаемого и «сырого» значения

Cleave.js разделяет:

  • отображаемое значение (formatted)
  • реальное значение (raw)

Для получения «чистого» числа используется метод:

cleave.getRawValue();

Пример:

inputElement.addEventListener('change', () => {
    console.log(cleave.getRawValue());
});

Если в поле отображается 1,000,000, метод вернёт 1000000.

Работа с нулями в начале числа

При числовом формате ведущие нули обычно нежелательны. Cleave.js автоматически нормализует такие случаи:

  • ввод 000123 → отображается как 123

Если требуется сохранить фиксированное количество разрядов (например, коды или ID), Cleave.js не подходит напрямую, так как его numeral режим ориентирован на математические значения, а не идентификаторы.

Пользовательские сценарии ограничения ввода

При необходимости более строгого контроля можно комбинировать Cleave.js с дополнительной логикой:

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

inputElement.addEventListener('input', () => {
    let value = cleave.getRawValue();

    if (Number(value) > 10000000) {
        inputElement.value = '10,000,000';
    }
});

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

Локализация отображения целых чисел

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

  • США: 1,000,000
  • Европа: 1 000 000
  • Индия: 10,00,000

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

  • numeralThousandsGroupStyle
  • delimiter

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

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

Особенности поведения при вставке данных

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

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

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

Совместное использование с другими форматами

Режим numeral несовместим с масками фиксированных блоков (blocks), так как он динамически перестраивает строку. При проектировании интерфейсов следует разделять:

  • числовые поля → numeral
  • коды, номера документов → blocks
  • даты и время → специализированные режимы Cleave.js

Поведение при очистке поля

При удалении всех символов поле остаётся пустым, а Cleave.js не подставляет нули автоматически. Это важно для корректной валидации формы:

if (cleave.getRawValue() === '') {
    // поле не заполнено
}

Итоговая конфигурация для целых чисел

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

const cleave = new Cleave(inputElement, {
    numeral: true,
    numeralDecimalScale: 0,
    numeralIntegerScale: 10,
    numeralThousandsGroupStyle: 'thousand',
    delimiter: ','
});

Такая конфигурация обеспечивает:

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