Clash Royale CLAN TAG

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

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 currencty sign. Also with number input field, users can type mutiple 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.

Cordova

react js

input field

394,333.2930

$394,333.293

text

number

,

.

1 Answer
1

There might be multiple ways but I also had exact same situation and I am doing like below:

HTML:

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


JS:

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


Hope this will help you!

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.