iOS/Android: Open numeric keyboard on password-type input field

Question

In my Angular/Ionic app there is a PIN number security, where the user needs to enter 3 digits in three different input fields.

I use inputs of "password" type for that, but I'd like to show a telephone-type keyboard (with only the 10 digits) when the user taps on those inputs.

Using <input type="tel"> is not good because I want the inputs to hide the digits like password-type inputs.

Any idea on how to do this? Also, this needs to work on both Android/iOS platforms.

Cheers,

tomatoKetchup

Answer 1

Using css you can do this

Add this class to your css.

.mask-text {
    -webkit-text-security: disc;
    -moz-webkit-text-security: disc;
    -moz-text-security: disc;
}

And use it in your input element, it will work in IOS 6 + and android 4.0 + devices. It does not work with Windows devices.

<input class="form-control mask-text" type="tel"
    name="account"  ng-    model="my.model" >'

This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every use

https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-security