1

I am writing an application using ionic where I have an input field that must take a positive integer number. I have looked up the types here

<ion-item>
    <ion-input #input type="number" min="0" inputmode="numeric" [(ngModel)]="..." pattern="[0-9]" required placeholder="Access Code"></ion-input>
</ion-item>

Now my problem is that on iOS the numeric input is the FULL numbered keyboard (I can use mathematical symbols). For iOS I want to use the

tel

type but for android I want to keep the

number

input type. Is there a way I can do this without making 2 separate html pages for each platform?

Quintin Balsdon
  • 5,484
  • 10
  • 54
  • 95

2 Answers2

3

As shown by the Ionic Docs, you can add this to your TS file:

 import { Platform } from 'ionic-angular';

 constructor(platform: Platform) {
      this.platform = platform;
 }

Then.. in your html, use 'ngIf' to check whether the platform is android or IoS:

<ion-item>
    <ion-input *ngIf="platform.is('android')" #input type="number" min="0" inputmode="numeric" [(ngModel)]="..." pattern="[0-9]" required placeholder="Access Code"></ion-input>
    <ion-input *ngIf="platform.is('ios')" #input type="tel" min="0" inputmode="numeric" [(ngModel)]="..." pattern="[0-9]" required placeholder="Access Code"></ion-input>
</ion-item>
  • Awesome! Thank you for this! I did find that I could get the numeric keypad by including the pattern=[0-9]* and then I can use the same input type. – Quintin Balsdon Oct 20 '16 at 10:26
  • 1
    Yeah makes sense, much neater solution –  Oct 20 '16 at 10:28
  • Well, I'd suggest you to use `showWhen` or `hideWhen` directive(s), so you don't need to import nothing in your **TS** file. – developer033 Oct 21 '16 at 00:01
1

According to this: Phone: numeric keyboard for text input

I need to have the input like this:

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

Which has produced the correct results. I was missing the asterisk.

Community
  • 1
  • 1
Quintin Balsdon
  • 5,484
  • 10
  • 54
  • 95