Masked input for currency jQuery

Question

In my web application I have an input field called \"Budget\" where users enter the proposed budget for a project. I need to create a masked input to automatically bring the

Answer 1

I use this one (http://code.google.com/p/jquery-formatcurrency/) in my production site and not had any issues with it and the api is simple enough.

Answer 2

Simple Solution using Only Javascript.

String.prototype.reverse = function () {
        return this.split("").reverse().join("");
    }

    function reformatText(input) {        
        var x = input.value;
        x = x.replace(/,/g, ""); // Strip out all commas
        x = x.reverse();
        x = x.replace(/.../g, function (e) {
            return e + ",";
        }); // Insert new commas
        x = x.reverse();
        x = x.replace(/^,/, ""); // Remove leading comma
        input.value = x;
    }

.currencyinput {
  border-color: #98969a;
    border-style: solid;
    border-width: 0.5px;
    display: inline-block;
}
  

.currencyinput input {   
    border-style: solid solid solid none;
    border-width: 0 0 0 thin;
}

<span class="currencyinput">$<input type="text" onkeyup="reformatText(this)" name="currency"></span>

Answer 3

I use the following code to archieve currency format without use of additional plugins:

$('input.money-bank').on('keydown',function(e){    
    // tab, esc, enter
    if ($.inArray(e.keyCode, [9, 27, 13]) !== -1 ||
        // Ctrl+A
        (e.keyCode == 65 && e.ctrlKey === true) || 
        // home, end, left, right, down, up
        (e.keyCode >= 35 && e.keyCode <= 40)) {
        return;
    }

    e.preventDefault();

    // backspace & del
    if($.inArray(e.keyCode,[8,46]) !== -1){
        $(this).val('');
        return;
    }

    var a = ["a","b","c","d","e","f","g","h","i","`"];
    var n = ["1","2","3","4","5","6","7","8","9","0"];

    var value = $(this).val();
    var clean = value.replace(/\./g,'').replace(/,/g,'').replace(/^0+/, '');   

    var charCode = String.fromCharCode(e.keyCode);
    var p = $.inArray(charCode,a);

    if(p !== -1)
    {
        value = clean + n[p];

        if(value.length == 2) value = '0' + value;
        if(value.length == 1) value = '00' + value;

        var formatted = '';
        for(var i=0;i<value.length;i++)
        {
            var sep = '';
            if(i == 2) sep = ',';
            if(i > 3 && (i+1) % 3 == 0) sep = '.';
            formatted = value.substring(value.length-1-i,value.length-i) + sep + formatted;
        }

        $(this).val(formatted);
    }    

    return;

});

JSFiddle: https://jsfiddle.net/gt2Ly5rt/6/

With this script, the user will enter only numbers, the script will automatically place decimal and thousands separators (it is hardcoded to BRL format, but you can customize it).

For instance, if user types:

• "1", it will display: "0,01"
• "12", it will display: "0,12"
• "123", it will display: "1,23"
• "123456", it will display: "1.234,56"

Hope it helps someone.

Answer 4

Try any of these:

http://plugins.jquery.com/tag/currency/

These may also contain what you're looking for:

http://plugins.jquery.com/tag/mask/