input type="number" not working for Ionic app in iOS devices

Question

In the Ionic 3 app, for numeric fields, the numeric keypad is not appearing in iOS devices. For input type number, the numbers are displaying in the first row of a keypad along with the alphabets. In Android, it's working fine. I tried with angular pattern \d* and inputmode="numeric" still its not working.

 <input type="number" pattern="[0-9]*" inputmode="numeric">

Answer 1

Try:

<ion-input type="number" pattern="[0-9]*"></ion-input>

or

<ion-input type="number" pattern="\\d*"></ion-input>

Answer 2

Try

<ion-input type="tel"></ion-input>

Answer 3

I usually use

<ion-input type="tel" pattern="[0-9]*" style="-webkit-text-security:disc"></ion-input>

-webkit-text-security:disc

to cover the input.

Answer 4

For those using ionic 4 and higher this is the best solution

<ion-input type="text" inputmode="tel"></input>

The key is the inputmode, that defines the keyboard that is shown. Leaving type=text allows me to allow other keys like "(" or "-" in the phone number field if needed.

See here for details: https://ionicframework.com/blog/keyboard-improvements-for-ionic-apps/