Inputmask: Problems with numeric inputmask

[FilipeZhou]

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.

[RobinHerbots]

Can you retest with latedt version. And thx for your feedback.

[FilipeZhou]

I tested the latest version using your website.

I checked that mask function works properly now with {radixPoint: ".", groupSeparator: ",", autoGroup: true}. It is solved the problem of pasting or setting value to the input.

I checked that unmask function works better now with {radixPoint: ",", groupSeparator: ".", autoGroup: true}, which takes off the groupSeparator from the value. But I would like that it could change the radixPoint to "." because of database decimal format. What do you think about it? No problems if this is not a good idea, I can change this part myself.

The problem of using {autoGroup: true, clearMaskOnLostFocus: false} options was solved. But I observed two things:
1 - I can not press and hold backspace to erase digits. I can only erase one digit each time I press the backspace button.
2 - If I select the whole integer part in a number like "123,456.00" (123,456) and erase, I get "16.00". If I select "16" in number "16.00" and erase, I get "0.00", but if I insert a digit (for example, "1") I get "100.00".

Thanks for your fixes.

[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

[FilipeZhou]

@manishkrai
I did not understand your problem. I tested your mask using the latest version and worked well.

@RobinHerbots
I noticed another thing. When I use the events 'change' or 'focusout' and try to get unmasked value of the input, the mask does not work well. For example, I focus in the input, select all characters (Ctrl+A) and type any integer number (for example, "20", without entering radixPoint and decimal digits). When the event fire, I just get "20.undefined" although I can see "20,00" in the input.

inputmask used:

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 = unmaskedValue.split(',');
        return x[0].replace(/\./g, '') + '.' + x[1];
    }
});

[RobinHerbots]

@FilipeZhou ,

Can you retest with the current version. ... and thx for the feedback!

[FilipeZhou]

@RobinHerbots

Thank you for the fixes for my problems.
I found out a strange behavior in the current version when delete characters in special situations with the same inputmask used.
For example, I type "1.456,00" and move my cursor to after '4' like "1.4|56,00" and delete '4', the result is "15|6,00". If I delete again, I get "1|56,00".

[manishkrai]

Hi @RobinHerbots,

When I enter a single digit number like- 1 or 2 or 3. This displays it as 100, 200, 300 respectively.
Ideally It should be 1.00, 2.00 and 3.00.
I am using 3.0.33 version of this contro. Kindly suggest me the way around for the same.

Regards,
Manish

[RobinHerbots]

@manishkrai ,

Update to the latest version.

[RobinHerbots]

@FilipeZhou ,

I see, I will have a look.

[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];
    }
});

[RobinHerbots]

@FilipeZhou ,

Some systems require that the radixpoint is like specified in the culture setting to be valid. (ASP.NET/MVC) otherwise the binding will be incorrect.

Anyway, the onUnMask is there to be adapted to your needs as you do.

[FilipeZhou]

@RobinHerbots

OK. No problems so.
Thank you anyway.

[BrayanLP]

@FilipeZhou
Excelente man
Solucione mi problema del caracter - y +

Saludos.