Force iOS/Android to open num. keyboard on password input fields


In my app there is a PIN number security, where the user needs to enter 3 digits. I use inputs of “password” type for that, but I’d like to show a telephone-type keyboard (with only the 10 digits) to open when the user clicks 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.


try to use ng-pattern directive ti specify only digits

1 Like

Thanks for your answer bobrov1989.

Your suggestion is good, unfortunately it doesn’t work for Android:

1 Like

in this case some custom directive will be the best decision

1 Like

Couldn’t you have both inputs on the page and just alter them based on what platform their on?

1 Like

@cyprusglobe: what do you mean exactly? Because I have no solution for Android at all yet.

If doing this on a directive with JS, is there a method to force a particular keyboard type to open?

1 Like

My 2 cents : think outside the box.

If the keyboard is the problem, don’t use it. Display your own keyboard like this :

1 Like

Thanks, but I’d prefer a native keyboard popup, it’s more elegant, personal opinion. But it’s worth considering if I can’t manage it programmatically.

1 Like

Mhhh…just a quick idea… you could just save the input on change into another variable and replace the real model with * or whatever char you want.
Isn’t there a css property for this? like webkit-text-security or something? dont know if it only works on password fields though.

1 Like

Have you considered having 2 fields (a visible and a hidden one) where a number field <input type="number"> (visible) is where user actually TYPE the password and another HIDDEN field will store a copy of password. By the time user types password, directive will copy digit to the hidden field and CHANGE the NUMBER field just typed number to “#” (for instance). When you post form, you will actually use the HIDDEN field no the visuble (number) one that might be something like “######”.

Not a very good solution, but I cant figure out now how to have a password field that shows only NUMBERs from the native device keyboard.

Good Lucky.

1 Like

These are 2 good ideas. I’m going to draw some inspiration from these, I’ll let you know if I succeed.
Cheers to both of you.

1 Like

Why not use PIN dailog plugin for this?

Here is the ngCordova version…

1 Like

Oh that looks exactly like what I need! And I’m already using ngCordova in my app. Never saw that plugin was here before… thanks for the discovery!

1 Like

Happy to help :smile:

1 Like
<input type=number style="-webkit-text-security:disc;" ng-model="loginData.pincode"></input>

actually got this to work after a little trial and error. Figured I would share and re-bump this post so we don’t have to install plugins.


Thanks a lot man!! saved me so much time

1 Like

Here is an easy way do to it, only inputmode and style are necessary.

You can choose between circle / disc / square / none in the style but… I think disc gives more fun.

  minlength=4 maxlength=4
  placeholder="4 digits"
1 Like