Show only number keyboard on Ionic/Cordova app

Question

I have two problems in my Ionic/Cordova app, both with numeric keyboard that I not have option to show it.

1) Password input that needs to show a numeric keyboard. It's showing a alpha numerical keyboard. If I change to numeric, I can't hide the entries (with *).

2) Numeric input that I have to insert currency mask (left to right). All options that I find runs in text input.

Anybody help me? Please!

If I add type="number" numeric keyboard shows correctly, but data don't hide (like ****). If I add type="password" the data hides, but the keyboard not shows only numeric. — Willian Custódio, Dec 04 '15 at 00:09
It's just not possible, the password type shows a regular keyboard and you can't change that — jcesarmobile, Dec 04 '15 at 07:16

score 21 · Accepted Answer · answered Dec 04 '15 at 15:47

21

I resolved with CSS:

<input type="number" style="-webkit-text-security:disc">

Thanks all for help!

answered Dec 04 '15 at 15:47

Willian Custódio

616
2
6
13

score 19 · Answer 2 · answered Nov 25 '16 at 16:54

19

I resolved with tel:

<input type="tel">

answered Nov 25 '16 at 16:54

user3546879

422
4
11

It can't hide the entries (with *) read the question carefully before answering – Rishabh Gusain Mar 17 '19 at 16:34

score 6 · Answer 3 · answered Aug 27 '19 at 10:24

6

I am using
<ion-input type="number" pattern="\d*"></ion-input> and it is working

android keypad

answered Aug 27 '19 at 10:24

Zeeshan Anjum

450
5
21

score 5 · Answer 4 · answered Oct 28 '16 at 10:39

5

2) Numeric input that I have to insert currency mask (left to right). All options that I find runs in text input.

Using http://www.numbox.org you can solve the second issue.

answered Oct 28 '16 at 10:39

victor sosa

899
13
27

score 5 · Answer 5 · edited Apr 24 '18 at 13:46

5

Old but i just had this problem.

I solved it making the input:

  type="number"
  pattern="[0-9]*"

Hope it helps.

edited Apr 24 '18 at 13:46

BlackBeard

10,246
7
52
62

answered Apr 24 '18 at 12:54

João Mourão

168
1
3
14

score 2 · Answer 6 · edited Jul 19 '19 at 12:45

2

Use pattern attribute: <input type="tel" pattern="[0-9]*">

edited Jul 19 '19 at 12:45

Exceptional NullPointer

778
1
9
21

answered Jul 19 '19 at 12:18

jonhhi

21
1

score 0 · Answer 7 · answered Dec 03 '15 at 03:52

0

Try to add this to your input, onkeypress='return event.charCode >= 48 && event.charCode <= 57'

answered Dec 03 '15 at 03:52

Omar Hassan

727
1
11
24

Thanks, but it not work... I need show only the numeric keyboard on enter in password input – Willian Custódio Dec 03 '15 at 23:12
@WillianCustódio Any luck? – Easwaramoorthy Kanagaraj Oct 18 '16 at 06:04

Show only number keyboard on Ionic/Cordova app

7 Answers7