如何格式化输入到 HTML 文本字段（如货币）中的文本？答案

【问题标题】：How can I format the text entered into an HTML textfield like currency?如何格式化输入到 HTML 文本字段（如货币）中的文本？
【发布时间】：2014-08-05 17:55:41
【问题描述】：

我有一系列 texfields，我想将其格式化为货币。最好，这将在运行中完成，但至少是 onblur。我所说的货币格式是 349507 -> 349,507 美元。有可能吗？

我更喜欢 HTML/CSS/JS 解决方案，因为我需要的解释更少。我对jQuery一点也不熟悉。

非常感谢任何帮助。
迈克

【问题讨论】：

标签： javascript html css

【解决方案1】：

这是我很久以前编写的一些代码，用于用逗号格式化数字。一个例子是formatNumber(349507, 0, 2, true) → "349,507.00"。

// Reformats a number by inserting commas and padding out the number of digits
// and decimal places.
//
// Parameters:
//     number:        The number to format. All non-numeric characters are
//                    stripped out first.
//     digits:        The minimum number of digits to the left of the decimal
//                    point. The extra places are padded with zeros.
//     decimalPlaces: The number of places after the decimal point, or zero to
//                    omit the decimal point.
//     withCommas:    True to insert commas every 3 places, false to omit them.
function formatNumber(number, digits, decimalPlaces, withCommas)
{
        number       = number.toString();
    var simpleNumber = '';

    // Strips out the dollar sign and commas.
    for (var i = 0; i < number.length; ++i)
    {
        if ("0123456789.".indexOf(number.charAt(i)) >= 0)
            simpleNumber += number.charAt(i);
    }

    number = parseFloat(simpleNumber);

    if (isNaN(number))      number     = 0;
    if (withCommas == null) withCommas = false;
    if (digits     == 0)    digits     = 1;

    var integerPart = (decimalPlaces > 0 ? Math.floor(number) : Math.round(number));
    var string      = "";

    for (var i = 0; i < digits || integerPart > 0; ++i)
    {
        // Insert a comma every three digits.
        if (withCommas && string.match(/^\d\d\d/))
            string = "," + string;

        string      = (integerPart % 10) + string;
        integerPart = Math.floor(integerPart / 10);
    }

    if (decimalPlaces > 0)
    {
        number -= Math.floor(number);
        number *= Math.pow(10, decimalPlaces);

        string += "." + formatNumber(number, decimalPlaces, 0);
    }

    return string;
}

您可以像这样在onblur 事件处理程序上使用它：

<input type="text" onblur="this.value = '$' + formatNumber(this.value, 0, 0, true)" />

这将在数字中添加逗号并在前面加上一个美元符号。

【讨论】：

谢谢你，约翰。我在应用程序中使用这种方法来获取货币字段的动态格式。也非常容易阅读！ +1
-1 它有一个错误，不适用于以 .9999 结尾的数字，例如“1879.9999”格式为 1,879.10 (!)
这不是错误，这是设计使然。如果您将 decimalPlaces 设置为 4，那么您将拥有“.9999”。
为什么用 for 循环来解析逗号而不是正则表达式？ number.replace(/[^0-9\.]/, '')

【解决方案2】：

Google 搜索“javascript 格式货币”的第一个结果

http://www.web-source.net/web_development/currency_formatting.htm

function CurrencyFormatted(amount)
{
    var i = parseFloat(amount);
    if(isNaN(i)) { i = 0.00; }
    var minus = '';
    if(i < 0) { minus = '-'; }
    i = Math.abs(i);
    i = parseInt((i + .005) * 100);
    i = i / 100;
    s = new String(i);
    if(s.indexOf('.') < 0) { s += '.00'; }
    if(s.indexOf('.') == (s.length - 2)) { s += '0'; }
    s = minus + s;
    return s;
}

【讨论】：