[Custom Input Masks] Limit no of digits before decimal on input
Question
Forge component by Sara Gonçalves

Hi,

I have an input field where a user can type only 4 numbers before the decimal place and a maximum of 2 decimal digits. So acceptable values: 1111, 0.12, 1111.12, 11.12, 1.1

I have tried to achieve this using the mask text, however when I use the following advanced options:

"{regex: '^([0-9]{0,4})(\\.[0-9]{0,2})?$', autoUnmask: false}"

Regex explanation

  1. ^([0-9]{0,4})               #start the expression and input digits only upto 4 places
  2. (\\.[0-9]{0,2})?$         #optional decimal digits upto max of 2 places till end of expression

The regex works but the 'dot' character is automatically typed on the input whenever the user types more than 4 digits. I tried escaping it with a single backslash but it doesn't work. I want the user to type the 'dot' explicitly because this way if the user presses "backspace" to erase the 'dot' from the input, the number before the 'dot' is also erased.

Another approach I tried was using the Mask number instead of mask text but I could only limit the number of decimal digits and not the number of digits before the decimal.

Can anyone let me know what is the correct way to do this?

mvp_badge
MVP

Hi,

Check if this 

SyntaxEditor Code Snippet

"{regex: '^([0-9]{0,4})([\\.]{1}[0-9]{0,2})?$', autoUnmask: false}"

Does what you want. Keep in mind if you have 1234.56 and just remove the dot (on field you will see 123456) and submit after, everything that is not the first 4 numbers will be ignored. In this case just 1234 will be submitted

Regards,

Marcelo

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.