ionic 2 根据平台区分输入类型答案

【问题标题】：ionic 2 differentiate between input types based on platformionic 2 根据平台区分输入类型
【发布时间】：2016-10-20 18:24:42
【问题描述】：

我正在使用 ionic 编写一个应用程序，其中我有一个必须采用正整数的输入字段。我查了here的类型

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

现在我的问题是，在 iOS 上，数字输入是全数字键盘（我可以使用数学符号）。对于 iOS，我想使用

电话

类型，但对于 android 我想保留

号码

输入类型。有没有一种方法可以在不为每个平台制作 2 个单独的 html 页面的情况下做到这一点？

【问题讨论】：

标签： html ionic2

【解决方案1】：

如Ionic Docs 所示，您可以将其添加到您的 TS 文件中：

 import { Platform } from 'ionic-angular';

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

然后..在你的html中，使用'ngIf'来检查平台是android还是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>

【讨论】：

太棒了！这次真是万分感谢！我确实发现我可以通过包含 pattern=[0-9]* 来获得数字键盘，然后我可以使用相同的输入类型。
是的，有道理，更整洁的解决方案
好吧，我建议你使用 showWhen 或 hideWhen 指令，这样你就不需要在 TS 文件中导入任何内容。

【解决方案2】：

据此： Phone: numeric keyboard for text input

我需要这样的输入：

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

这产生了正确的结果。我错过了星号。

【讨论】：