Format Currency using Javascript

• Download FormatCurrency.zip - 965 B

Introduction

This article describes how to format numbers to currency.

Background

These days I need format numbers in currency format and all I found searching net don't solve my problem. I found many good solutions, I use two as base. One in pt-br msdn forum and another in a javascript forum.

Using the code

Before create methods, create a global variable named triggerFormat. triggerFormat is a Boolean and need to check if FormatString method is fired or no.

var triggerFormat = false;

In my code I use 3 client events: onkeydown, onkeypress and onkeyup.

In onkeydown event I use Backspace method to check if a backspace or delete was pressed:

function BackSpace(obj)
{
    var whichCode = (window.Event) ? event.which : event.keyCode;
    if (whichCode == 8 || whichCode == 46)
    {
        triggerFormat = true;
    }
    else
        return true;
}

In onkeypress event I use Money method to check if a digits or characters was pressed, if characters or some keys like return was pressed, nothing happens and FormatString method don't fire.

function Money()
{
    var whichCode = (window.Event) ? event.which : event.keyCode;
    if(whichCode == 0) return true;
    if(whichCode == 9) return true;
    if(whichCode == 13) return true;
    if(whichCode == 16) return true;
    if(whichCode == 17) return true;
    if(whichCode == 27) return true;
    if(whichCode == 34) return true;
    if(whichCode == 35) return true;
    if(whichCode == 36) return true;

    if(whichCode > 47 && whichCode < 58) 
        triggerFormat = true;
    else
        event.keyCode = 0;
}

In onkeyup event I use FormatString method to format numbers to currency

function FormatString(obj, quantityDecimals)
{
    var whichCode = (window.Event) ? event.which : event.keyCode;
    if(triggerFormat == true)
    { 
        var value = obj.value;
        value = value.replace(/\,/g, "");
        value = value.replace(/\./g, "");

        obj.value = MaskValue(value, quantityDecimals).FormatCurrency(quantityDecimals);
        triggerFormat = false;
        return false;
    }
    else
        return true;
}

In FormatString method the magic happens. I use a Maskvalue passing value and quantity decimals:

function MaskValue(value, quantityDecimals)
{
    var val2 = '';
    var len = value.length;
    var decimals = "";
    for(var i = 0; i < quantityDecimals; i++)
        decimals += "0";
    if(len == 0)
        return "0." + decimals;
    if(value.length <= decimals.length)
        return "0." + decimals.substring(0, decimals.length - value.length) + value;
    for(var j = 0; j < value.length; j++)
    {
        if(value.substring(0, 1) == "0" && (value.length > 5))
            value = value.substring(1, value.length);
    }
    var parte1 = value.substring(0, value.length - decimals.length);
    var parte2 = value.substring(value.length - decimals.length);
    var returnvalue = parte1 + "." + parte2;
    return returnvalue;
}

I using quantity decimals here to know length of this. In first for I mount decimals. First if is obvious. Second if is obvious too. I need create a second for to check left 0s because keyup event don't happen if you hold key, so when you release key check if exists left 0s. And after I simply divide the first and the second part to put a dot between them.

FormatCurrency need this:

function FormatMoney(c)
{
    var t = this;
    if(c == undefined)
        c = 2;
    var p, d = (t = t.split("."))[1].substr(0, c);
    for(p = (t = t[0]).length; (p -= 3) >= 1;)
        t = t.substr(0, p) + "." + t.substr(p);
    return t + "," + d + Array(c + 1 - d.length).join(0);
}

String.prototype.FormatCurrency = FormatMoney

So, this last method will format in currency and put the number of decimal desired.

Points of Interest

History

This version is 1.0... version 2.0 coming soon...