Калькулятор с денежными суммами

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

var cleave = new Cleave('.input-money', {
    numeral: true,            // Включение числового формата
    numeralThousandsGroupStyle: 'thousand', // Разделение тысяч
    numeralDecimalMark: '.',  // Разделитель десятичных
    numeralDecimalScale: 2,   // Количество знаков после запятой
    prefix: '$',              // Символ валюты перед числом
    noImmediatePrefix: false  // Добавление префикса сразу при фокусе
});

Ключевые моменты:

  • numeral: true — активирует числовой режим.
  • numeralThousandsGroupStyle может принимать значения 'thousand', 'lakh', 'wan'.
  • numeralDecimalScale ограничивает количество знаков после десятичного разделителя.
  • prefix и suffix позволяют добавлять валютный символ или текст.

Настройка локализации и валюты

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

var cleaveEuro = new Cleave('.input-euro', {
    numeral: true,
    numeralThousandsGroupStyle: 'thousand',
    numeralDecimalMark: ',',
    numeralDecimalScale: 2,
    prefix: '€ ',
    noImmediatePrefix: true
});

Использование noImmediatePrefix: true делает поле пустым при фокусе до ввода цифр, что повышает удобство пользовательского интерфейса.

Ограничение диапазона суммы

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

var cleaveRange = new Cleave('.input-range', {
    numeral: true,
    numeralDecimalScale: 2
});

var input = document.querySelector('.input-range');

input.addEventListener('input', function() {
    var value = parseFloat(cleaveRange.getRawValue());
    if (value < 0) {
        cleaveRange.setRawValue('0');
    } else if (value > 10000) {
        cleaveRange.setRawValue('10000');
    }
});

Особенности реализации:

  • getRawValue() возвращает чистое числовое значение без префиксов и разделителей.
  • Метод setRawValue() позволяет программно изменять значение поля, поддерживая форматирование.

Интеграция с калькуляторной логикой

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

var cleaveA = new Cleave('#amountA', { numeral: true, numeralDecimalScale: 2 });
var cleaveB = new Cleave('#amountB', { numeral: true, numeralDecimalScale: 2 });
var resultField = document.querySelector('#result');

function calculateSum() {
    var valueA = parseFloat(cleaveA.getRawValue() || 0);
    var valueB = parseFloat(cleaveB.getRawValue() || 0);
    var sum = valueA + valueB;
    resultField.value = sum.toFixed(2);
}

document.querySelectorAll('#amountA, #amountB').forEach(input => {
    input.addEventListener('input', calculateSum);
});

Рекомендации:

  • Использовать parseFloat для преобразования чисел из строкового формата Cleave.js.
  • Функция toFixed(2) гарантирует корректное отображение двух десятичных знаков.
  • Обновление результата при каждом вводе обеспечивает динамическую реакцию калькулятора.

Комбинирование с префиксом и выводом результата

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

var cleaveResult = new Cleave('#result', {
    numeral: true,
    numeralDecimalScale: 2,
    prefix: '$',
    noImmediatePrefix: true
});

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

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

Для финансовых приложений важно корректно обрабатывать отрицательные значения:

var cleaveMoney = new Cleave('.input-money', {
    numeral: true,
    numeralDecimalScale: 2,
    numeralPositiveOnly: false // Разрешение отрицательных значений
});

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

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

Cleave.js поддерживает динамическое обновление конфигурации:

cleaveMoney.setProperties({
    prefix: '€',
    numeralDecimalMark: ','
});

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

Форматирование больших сумм и тысячные разделители

Для сумм свыше миллиона важно визуально отделять группы цифр:

var cleaveLarge = new Cleave('.input-large', {
    numeral: true,
    numeralThousandsGroupStyle: 'thousand',
    numeralDecimalScale: 2
});

Поддерживаются стили группировки:

  • 'thousand' — стандартная тысячная группировка: 1,000,000
  • 'lakh' — индийская система: 10,00,000
  • 'wan' — китайская система: 100,0000

Комбинация с другими форматами ввода

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

var cleaveComplex = new Cleave('.input-complex', {
    blocks: [3, 3, 2],
    delimiters: ['.', '.'],
    numericOnly: true
});

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

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

Оглавление