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})?$/"

1 Like
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

1 Like
4

in this case some custom directive will be the best decision

1 Like
5

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

1 Like
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?

1 Like
7

My 2 cents : think outside the box.

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

image
tempFileForShare.jpg720×1280 194 KB

1 Like
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.

1 Like
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.

1 Like
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.

1 Like
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.

1 Like
12

Why not use PIN dailog plugin for this?

Here is the ngCordova version…

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

1 Like
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!

1 Like
14

Happy to help :smile:

1 Like
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.

12 Likes
16

Thanks a lot man!! saved me so much time

1 Like
17

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.

<ion-input
  inputmode="numeric"
  minlength=4 maxlength=4
  [(ngModel)]="userPassword"
  placeholder="4 digits"
  style="-webkit-text-security:disc;">
</ion-input>
1 Like