How can I format the text entered into an HTML textfield like currency?

Question

I have a series of texfields, which I'd like to format as currency. Preferably, this would be done on the fly but at least onblur. What I mean by currency format is 349507 -> $349,507. Is it possible?

I prefer HTML/CSS/JS solutions, because I need less explanation. I'm not familiar at all with jQuery.

Any help is greatly appreciated.
Mike

Answer 1

Here's a some code I wrote a long while ago to format a number with commas. An example is 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;
}

You can use it on an onblur event handler like so:

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

That'll add commas to the number and slap a dollar sign on the front.