My goal is to have my input element force the apple device to toggle a decimal-number keyboard when clicked on. I managed to do that just fine, however, when entering numbers the input element is treated as a password and the numbers are replaced with dots.

How do I make an input element tag force the apple device to show a decimal-number keyboard and NOT act as a type password input element?

I have tried the all different combinations shown in the input element below

             <input
                  onChange={handleInputs}
                  value={someVariable_1}
                  id={someVariable_2}
                  type="text"/"numeric"/"number"
                  autoComplete="off"
                  autoCapitalize="off"
                  autoCorrect="off"
                  pattern="[0-9]*"
                  inputMode="decimal"
                />

CodePudding user response：

Since you already have type="text" you can try some other venues, since the browser should not show it as a password. You can try 2 other methods,

1. -webkit-text-security: none;
2. input-security: none;

The first is only supported by browsers that support the webkit keyword, and the second option is still a draft and not really supported by any browsers yet. So it might be a good idea to test this in different browsers caniuse says that -webkit-text-security is not supported by firefox for example.