Decimals not showing correctly with the money mask on

[leandrodimitrio]

Device

Mac and PC

Browser (and version)?

Tested in Chrome, both in Mac and PC

Functional jsfiddle exemplifying your problem:

https://jsfiddle.net/24do081r/

Describe the problem in-depth:

Hey guys,

I'm implementing a donations page in our website, and our acquiring system (Cielo) and they expect the value of the transactions to be with decimals and no points or commas (R$ 10,00 would be 1000, for example).

Having said so, whenever I use your mask and type 50, for example, I get back just that: 50 (which in terms of UX it gives the user the impression they're donating R$ 50,00). If I type one more character, for example another 0, what I get is 5,00.

Is there a way for the first characters to show as they really are: cents? For example, I type 1 and I get 0,01, then another 0 I get 0,10 and so on?

Cheers!

[ozgurg]

I have same problem.

[gjwnc]

@leandrodimitrio @ozgurg I just had the same problem. My solution was to use onChange like this:

        $('.js-masked-money').mask('000.000.000.000.000,00', {
            placeholder: "0,00",
            reverse: true,
            onChange: function(val, e, field){
                // get only the numeric figures from the input value
                val = val.replace( /[^0-9]+/g, '');
                // strip leading zeros
                val = (""+val).replace(/^0+/, '');
                // fill up leading zeros if its a cent value
                while( val.length <= 2 ) {
                    val = "0"+val;
                }
                // mask the new value and set it for the input element
                $(field).val(field.masked(val));
            }
        });

It took me a while to figure this out and I'm not sure if there is a better solution. Maybe you could comment if you have an improvement.

[yvescavalcanti]

I have the same problem, it works fine on Opera Browser but not in Chrome.