masked-input | Mask input with simple API and rich customization | Ecommerce library

I have some inputs in the form which from the visual point of view accept numbers only, for example input for "salary" or "phone number". However, I'd like to add some sort of input mask and make formatting for those inputs.

For example for "salary" input, I'd like the value to look like this 9 999 if user entered 4 numbers or like this 99 999 if users entered 5 numbers.

But at the same time I want to have a pattern='\d'* for these inputs in order for the user to "open" keyboard with the numbers only when user touches the input from smartphone.

If I do this, it doesn't allow me to submit the form, even though I trim all spaces before submission, it still says "Please match the format requested".

The question: is there any workaround to achieve what I need?

Here is a codesandbox with the example, please open from a smartphone to see the "keyboard" I want to "show" to the user.

https://codesandbox.io/s/masked-input-with-different-currency-patterns-forked-v8f.

I'm using React with reatstrap and, I need to use some type of input mask, to prevent the user from typing characters in the field, and to make an indentation for monetary values (example = $ 10.00)

I found this library: https://www.npmjs.com/package/react-currency-masked-input

I tried this code:

I have a form with more than 10 input/select options but i wish to show most of this form inputs when 4 of my fields specifically are filled.

I've done some research and found