[Custom Masks] MaskNumber not working on NUMBER input

[Custom Masks] MaskNumber not working on NUMBER input

  
Forge Component
(22)
Published on 7 Mar by Jogait
22 votes
Published on 7 Mar by Jogait

I am trying to use the CustomMasks\MaskNumber on an input field that is of type NUMBER.

It works on TEXT input fields, but on my NUMBER input, it does not change the formatting (e.g. add commas, etc).


You see, for desktop apps, I would just make them TEXT.

But, mine are responsive web apps so I really need the fields to be NUMBER so that on mobile it brings up the number pad.


QUESTION: How can I use the CustomMasks on a NUMBER input field?

Bruce,

Here I managed work with no problem at all. But an few tricks to use.

Look at my screencast and the link for some insight.

Custom Mask Examples

Screencast

César Mateus wrote:

Bruce,

Here I managed work with no problem at all. But an few tricks to use.

Look at my screencast and the link for some insight.

Custom Mask Examples

Screencast

Thanks Cesar for the excellent screencast. It looks like both of the inputs you used were of type TEXT.

Try making your input widget that is called "FieldNumbMasked" a Type=Number. Right now, you have it as 

a Type=Text. If you change it to Type=Number, you will see that the mask does not work.


You see, I need the number pad to appear when the user is on a phone.

And, I want the mask to appear for decimal, currency, etc.

The only way I know to make the number pad appear on a phone is by setting the input widget to

Type=Number. But, when I do that, the mask does not work.


Please try making your input widget that is called "FieldNumbMasked" a Type=Number and see if the mask

stops working.

Hello Bruce,

I know this is a late reply, but if you don't have a solution yet, here is a explanation and a possible workaround.

Looks like the text type on the input is needed because the input has text characters used as separators. Try to use the type "tel" on the input. It will show a special keyboard with numbers.

If you want to read more about it, you can check out this article:

https://medium.com/outsystems-experts/javascript-events-unmasked-how-to-create-an-input-mask-for-mobile-fc0df165e8b2

Hi. I tried to use this input. I want a user to be only able to enter numbers 0-9 whole numbers to form part of a currency but we don't want the user to enter pence. I managed to disable the .but when I used a number with 4 digits 1234 it appears as 1,234 but saves in my table as 0. I want to save up to nine digits. Do i need a text input box not number or does this require something else?