Problems with numeric inputmask

Hi,

I used the following mask for my input (Tested on the latest version).

input.inputmask("decimal", {
    placeholder: "0",
    digits: 2,
    digitsOptional: false,
    radixPoint: ",",
    groupSeparator: ".",
    autoGroup: true,
    allowPlus: false,
    allowMinus: false,
    clearMaskOnLostFocus: false,
    removeMaskOnSubmit: true,
    onUnMask: function(maskedValue, unmaskedValue) {
        var x = unmaskedValue.split(',');
        if (x.length != 2)
            return "0.00";
        return x[0].replace(/\./g, '') + '.' + x[1];
    }
});

First I noted that with default options where {radixPoint: “.”, groupSeparator: “,”, autoGroup: true}, the mask function does not work correctly. For example, if I set “10000” or “10000.00” to my input which comes from my database, the masked value is “100.00”.

Then when I used {radixPoint: “,”, groupSeparator: “.”, autoGroup: true} options, the mask function also does not work and the unmask function does not unmask the value, i.e., the unmask function returns the same value. For example, if my input has value “1.000,00”, the unmask function returns “1.000,00”. But with the default options, the unmask function returns the value correctly, i.e., taking off the groupSeparator(“,”) from the value. My solution was to define what to return using onUnMask.

I found another problem when I use {autoGroup: true, clearMaskOnLostFocus: false} to insert groupSeparator. I do not know how to explain well that problem, so I will try to be clear enough. With this options, the input first show the value “0.00”. When I focus the input the cursor goes to before radixPoint and I type “123456”, the input value will be “123,456.00”. But if I focus again and start erasing the digits with backspace until input value show “,00”, and then focus out the input value is updated to show “000.00”. That happens with {autoGroup: true}, but not with {autoGroup: false}.

I suggest to improve the behavior described when using {autoGroup: true, clearMaskOnLostFocus: false}. But I think that making mask and unmask function work properly is a good idea. I mean that unmask function could return the value with default format, i.e, database decimal format (no groupSeparator and radixPoint:“.”).

I think that your inputmask is great because offer many options like removeMaskOnSubmit, where usually the values are unmasked or converted on the server side, and other options that I have not explored yet.

Thanks.

[FilipeZhou]

@RobinHerbots

Thank you very much for the fixes. Just a suggestion: I have seen in your code that when you mask a value, according to inputmask, you apply the mask replacing the radixPoint (‘.’) to the one in inputmask. But when I get the unsmakedvalue, you just take off the groupSeparator from the value. What do you think in replacing back radixPoint to ‘.’ too? Now I set onUnMask function to my inputmask to do this part:

input.inputmask("decimal", {
    placeholder: "0",
    digits: 2,
    digitsOptional: false,
    radixPoint: ",",
    groupSeparator: ".",
    autoGroup: true,
    allowPlus: false,
    allowMinus: false,
    clearMaskOnLostFocus: false,
    removeMaskOnSubmit: true,
    autoUnmask: true,
    onUnMask: function(maskedValue, unmaskedValue) {
        var x = maskedValue.split(',');
        return x[0].replace(/\./g, '') + '.' + x[1];
    }
});

[manishkrai]

Hi, I am facing same issue -

$(element).inputmask(‘decimal’, { radixPoint: “.”, digits: 2, integerDigits: 13, allowMinus: true, autoGroup: true, groupSeparator: “,”, groupSize: 3, skipRadixDance: true });

When I insert a digit (for example, “1”) I get “100”.

Fo more than a digit it’s working fine - like 10 got converted to 10.00, 100 to 100.00 and 1000 to 1,000.00,

Could you please help me to fix this issue.

Regards, Manish