How to show number keyboard for a text input field in mobile application

Question

I am using Cordova + react js to build an Android app and I have a requirement to render a currency number on a input field. When this input field get focus, it shows a number keyboard.

After users type in some numbers, it will format the number as a text string. For example, if users type 394,333.2930 , it will render it as $394,333.293 . There is no problem for me to format the string. The problem is how can I show a number keyboard for a text input field.

I know it works for a input with number type but it doesn't allow users type , or currency sign. Also with number input field, users can type multiple dot . which I don't want this happen. So how can I show a number only keyboard for a text input field in Cordova application? I am not sure whether this is a Cordova specific problem or a general web application problem.

I have tried to use tel but it still shows the characters as below screen shot. They are shown as a gray characters after each number. How can I get rid of them?

<input id="numberInput" type="tel" maxlength="6"/>

Answer 1

There might be multiple ways but I also had exact same situation and I am doing like below. Use type="tel" and add check on keydown event to handle unwanted chars like "#", "+", "*", ";", ",", "-" . Below is code:

HTML:

<input id="numberInput" type="tel" maxlength="6"/>

JS:

// validation for targetSalary input
var invalidChars = ["#", "+", "*", ";", ",", "-"];
numberInput.addEventListener("keydown", function(event) {
  if (invalidChars.includes(event.key)) {
    event.preventDefault();
  }
});

Hope this will help you!

Update:

As you have changed the requirement and as per this new requirement you want to hide special chars from keyboard Answer to this requirement is that you can not hide special chars from keyboard in normal way. Maybe you can achieve it by creating your own custom keyboard.