customize jquery mask plug in

Question

i am using jauery mask plugin from

http://digitalbush.com/projects/masked-input-plugin/

i want to customize my plugin and try my besy to do it but i can't.

What i want is

1. i can enter digits only.
2. all the digits will be formated automitcally (,) after every 3rd number.
3. only two digits after (.)

i use follwoing

      $("#product").mask("999,999,999.99",{placeholder:" "});

the problem with this is: if i need to type only 150.50, i need to bring my cursore on the exact place and type.

for example in the above mask if i type 150.50 the text box look like this

[][][],[][][],150.50 where [] is blank space. what i want is 150.50 only and if i type 1150.50 then 1,150.50

but i want the formating automaticaly once i am typing and dont want to show extra (,)

Thanks

Answer 1

You do not want a masking plugin, but a formatting plugin ..

have a look at http://plugins.jquery.com/project/number_format

Answer 2

Gaby's answer is correct and provides far more options than mine. However, I whipped up a solution for your specific needs. View it here.

$('input').bind('keyup blur', function(){
    var i, j, final = '', input = $(this),
        raw = input.val().replace(/[^\d]/g, '');
    while (raw.substr(0, 1) === '0' && raw.length > 2) { //remove leading 0s for large numbers
        raw = raw.substr(1);
    }
    while (raw.length < 2) { //pad with up to two 0s for small numbers
        raw = '0' + raw;
    }
    for (i = 1; i <= raw.length; i++) { //format the number as ##,###,###.##
        j = raw.length - i;
        final =
            (i === 2 ? '.' : ((i + 1) % 3) === 0 && i != raw.length ? ',' : '')
            + raw.substr(j, 1)
            + final;
    }
    input.val(final);
});