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


#1

Hello,

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.

Cheers,
tomatoKetchup


#2

try to use ng-pattern directive ti specify only digits
ng-pattern="/^([0-9]{4})?$/"


#3

Thanks for your answer bobrov1989.

Your suggestion is good, unfortunately it doesn’t work for Android: http://blog.pamelafox.org/2012/05/triggering-numeric-keyboards-with-html5.html


#4

in this case some custom directive will be the best decision


#5

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


#6

@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?


#7

My 2 cents : think outside the box.

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


#8

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.


#9

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.


#10

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.


#11

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.


#12

Why not use PIN dailog plugin for this?

Here is the ngCordova version…

http://ngcordova.com/docs/plugins/pinDialog/


#13

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!


#14

Happy to help :smile:


#15
<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.


#16

Thanks a lot man!! saved me so much time