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

Количество знаков после запятой в числовом режиме Cleave.js управляется параметром numeralDecimalScale. Этот параметр определяет максимально допустимое число цифр в дробной части.

Базовый пример:

<input type="text" id="price">
new Cleave('#price', {
    numeral: true,
    numeralDecimalScale: 2
});

При вводе:

12345.6789

поле автоматически преобразуется в:

12,345.67

После достижения лимита новые цифры дробной части больше не принимаются.

Принцип работы ограничения

Параметр работает только при активированном режиме:

numeral: true

Без него numeralDecimalScale игнорируется.

Пример:

new Cleave('#amount', {
    numeral: true,
    numeralDecimalScale: 3
});

Допустимый ввод:

15.123

Недопустимый:

15.12345

Лишние цифры будут отброшены автоматически.

Значение 0

Если установить значение 0, дробная часть полностью отключается.

new Cleave('#count', {
    numeral: true,
    numeralDecimalScale: 0
});

Теперь ввод:

1000.55

преобразуется в:

1,000

Такой режим особенно полезен для:

  • количества товаров;
  • возраста;
  • целочисленных идентификаторов;
  • счётчиков;
  • инвентарных номеров.

Фиксированное количество знаков

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

Пример:

new Cleave('#sum', {
    numeral: true,
    numeralDecimalScale: 2
});

Результаты:

12     → 12
12.1   → 12.1
12.12  → 12.12

Нули автоматически не добавляются:

12 → 12.00

не произойдёт.

Использование numeralDecimalScale вместе с numeralDecimalMark

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

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

new Cleave('#euro', {
    numeral: true,
    numeralDecimalMark: ',',
    delimiter: ' ',
    numeralDecimalScale: 2
});

Результат:

12345,67

будет отображён как:

12 345,67

Ограничение длины дробной части

Один знак после запятой

new Cleave('#temperature', {
    numeral: true,
    numeralDecimalScale: 1
});

Примеры:

36.6
12.3
-5.8

Подходит для:

  • температуры;
  • рейтингов;
  • коэффициентов;
  • процентов.

Два знака после запятой

new Cleave('#money', {
    numeral: true,
    numeralDecimalScale: 2
});

Наиболее распространённый вариант для:

  • денежных сумм;
  • цен;
  • налогов;
  • банковских операций.

Пример:

1500.99

Три и более знаков

new Cleave('#weight', {
    numeral: true,
    numeralDecimalScale: 3
});

Применяется для:

  • измерений;
  • научных вычислений;
  • инженерных данных;
  • метрических величин.

Пример:

15.728

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

При превышении лимита Cleave.js не выдаёт ошибку и не ломает ввод. Библиотека просто блокирует лишние символы.

Конфигурация:

new Cleave('#field', {
    numeral: true,
    numeralDecimalScale: 2
});

Ввод:

15.123456

Результат:

15.12

Это делает интерфейс значительно удобнее по сравнению с ручной валидацией.

Получение «сырого» значения

Formatted value:

12,345.67

Raw value:

12345.67

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

const cleave = new Cleave('#price', {
    numeral: true,
    numeralDecimalScale: 2
});

console.log(cleave.getRawValue());

getRawValue() сохраняет дробную часть с учётом установленного лимита.

Работа с отрицательными числами

Ограничение дробной части работает и для отрицательных значений.

new Cleave('#balance', {
    numeral: true,
    numeralDecimalScale: 2
});

Ввод:

-1520.567

Результат:

-1,520.56

Использование вместе с numeralPositiveOnly

Можно одновременно:

  • ограничить число знаков после запятой;
  • запретить отрицательные значения.
new Cleave('#salary', {
    numeral: true,
    numeralPositiveOnly: true,
    numeralDecimalScale: 2
});

Теперь:

-150.25

не будет принято.

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

Количество знаков можно изменять в зависимости от режима работы интерфейса.

Пример:

let scale = 2;

const cleave = new Cleave('#dynamic', {
    numeral: true,
    numeralDecimalScale: scale
});

Пересоздание экземпляра:

cleave.destroy();

new Cleave('#dynamic', {
    numeral: true,
    numeralDecimalScale: 4
});

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

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

Особенности округления

Cleave.js не выполняет математическое округление. Библиотека лишь ограничивает ввод.

Пример:

12.999

при:

numeralDecimalScale: 2

превратится в:

12.99

а не:

13.00

Если требуется настоящее округление, его необходимо выполнять отдельно:

const value = Number(cleave.getRawValue());
const rounded = value.toFixed(2);

Работа с вставкой текста

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

Вставка:

99999.888888

при настройке:

numeralDecimalScale: 2

автоматически станет:

99,999.88

Использование в React

import Cleave from 'cleave.js/react';

function App() {
    return (
        <Cleave
            options={{
                numeral: true,
                numeralDecimalScale: 2
            }}
        />
    );
}

Использование в Vue

mounted() {
    new Cleave(this.$refs.input, {
        numeral: true,
        numeralDecimalScale: 2
    });
}

Использование с валютами

Для разных валют требуется разная точность.

Доллары и евро

numeralDecimalScale: 2

Пример:

1250.45

Японская иена

numeralDecimalScale: 0

Пример:

1500

Криптовалюты

numeralDecimalScale: 8

Пример:

0.12345678

Комбинация с пользовательскими разделителями

new Cleave('#custom', {
    numeral: true,
    delimiter: '_',
    numeralDecimalMark: ',',
    numeralDecimalScale: 3
});

Результат:

1_234_567,891

Типичные ошибки

Отсутствует numeral: true

Неправильно:

new Cleave('#field', {
    numeralDecimalScale: 2
});

Правильно:

new Cleave('#field', {
    numeral: true,
    numeralDecimalScale: 2
});

Ожидание автоматического округления

Ошибка:

1.999 → 2.00

Cleave.js так не работает.

Фактический результат:

1.99

Конфликт локалей

Неправильно:

numeralDecimalMark: ',',
delimiter: ','

Разделитель тысяч и дробной части не должны совпадать.

Правильно:

delimiter: ' ',
numeralDecimalMark: ','

Практический пример денежного поля

<input type="text" id="payment">
const payment = new Cleave('#payment', {
    numeral: true,
    numeralThousandsGroupStyle: 'thousand',
    delimiter: ' ',
    numeralDecimalMark: ',',
    numeralDecimalScale: 2
});

Поведение поля:

1234567,8999

превратится в:

1 234 567,89

Raw value:

1234567.89

Практический пример для криптовалют

new Cleave('#btc', {
    numeral: true,
    numeralDecimalScale: 8
});

Допустимый формат:

0.12345678

Лишние цифры будут автоматически отброшены.

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

new Cleave('#percent', {
    numeral: true,
    numeralDecimalScale: 1
});

Ввод:

15.78

Результат:

15.7

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

  • процентных ставок;
  • коэффициентов;
  • статистики;
  • аналитических данных.
Оглавление