Masked input for currency jQuery

问题:

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 entered amount to the following format while the user is typing into the input field:

1 000
10 000
100 000

I've searched throughout the Internet but don't seem to find the necessary one. Could anybody point me to a suitable plugin or maybe suggest a custom solution?

Thanks in advance.

回答1:

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/

回答2:

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.

回答3:

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>

回答4:

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.