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

Мне не удалось преобразовать введенное значение в формат валюты. Я хочу автоматически добавлять тысячи и десятичные разделители, когда пользователь вводит число (5 000,00; 125 000,00).

Вот мой код:

$('input.CurrencyInput').on('blur, focus, keyup',
    function() {
        $(this).val().toLocaleString('en-US', {
            style: 'decimal',
            maximumFractionDigits: 2,
            minimumFractionDigits: 2
        });
    });
Источник

2 ответа

Решение

Есть несколько проблем с вашим кодом:

  1. Вы используете запятую при привязке нескольких обработчиков событий к полю ввода.
  2. Вы не конвертируете полученное значение в число перед применением toLocaleString в теме.
  3. Вы не устанавливаете значение текстового поля снова после преобразования.

Исправляя это, вот рабочая демонстрация. Ради простоты я удалил другие обработчики событий, кроме blur, как keyup вызывал проблемы.

$('input.CurrencyInput').on('blur', function() {
  const value = this.value.replace(/,/g, '');
  this.value = parseFloat(value).toLocaleString('en-US', {
    style: 'decimal',
    maximumFractionDigits: 2,
    minimumFractionDigits: 2
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="CurrencyInput">

Источник

Анализировать значение для конкретной валюты локали

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

Предостережение:

Поскольку ввод может быть буквально тарабарщиной, например 1,2.3.45,5и по-прежнему выдавать действительный вывод (например, USD: "12,345.50"), есть небольшая, но удобная для пользователя оговорка:

      // Example: conversion to HRK (Format: n.nnn,nn)
INPUT: "0.575"   OUTPUT: "0,58"      // smart guessed: decimals
INPUT: "1.575"   OUTPUT: "1.575,00"  // smart guessed: separator

Пример:

      /**
 * Parse value to currency
 * @param {number|string} input
 * @param {string} locale - Desired locale i.e: "en-US" "hr-HR"
 * @param {string} currency - Currency to use "USD" "EUR" "HRK"  
 * @return {object} 
 */
const parse = (input, locale = "en-US", currency = "USD") => {
  let fmt = String(input)
    .replace(/(?<=\d)[.,](?!\d+$)/g, "")
    .replace(",", ".");
  const pts = fmt.split(".");
  if (pts.length > 1) {
    if (+pts[0] === 0) fmt = pts.join(".");
    else if (pts[1].length === 3) fmt = pts.join("");
  }
  const number = Number(fmt);
  const isValid = isFinite(number);
  const string = number.toFixed(2);
  const intlNFOpts = new Intl.NumberFormat(locale, {
    style: "currency",
    currency: currency,
  }).resolvedOptions();
  const output = number.toLocaleString(locale, {
    ...intlNFOpts,
    style: "decimal",
  });
  return {
    input,
    isValid,
    string,
    number,
    currency,
    output,
  };
};

Пример теста:

Документация:

Источник
Другие вопросы по тегам