8
Views
2
Comments
[Input Mask React] Input Mask Percentage how to avoid percentage scaling
inputmask-react
Reactive icon
Forge asset by João Barata
Application Type
Reactive

Hello,
We are using input mask percentage to mask percentage inputs. Its working fine as it already blocks the numbers from 0 to 100, which is good. Althought the client reported and issue: if we type "50" it stays 50, plus the preffix %, however if we include the symbol in the text like "50%" the mask converts it to 0.50. This is fixed by setting the option on the mask 'IsNumeric' to true, but this has too many decimals, to type 50 its needed to click '0' about 4 times, which client might not want aswell.

So i have been digging the component JS's and cant find where this behavior is being done.


Appreciate if someone can help,

Thanks!

2023-08-18 10-40-36
Deepak M

Hi Ruben Magalhães,


To prevent users from typing % manually

  • Use a custom Js handler to block % key input, or

  • Sanitize the input on change and remove % if it's typed.

UserImage.jpg
Ruben Magalhães

Hello @Deepak - EONE 

Thanks for the reply, and yes we already tried prevent the insertion of % in the input, and it works, however, since we have many places that use the mask and we dont need this functionality it would be better to change the mask behavior, if possible.

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