Ionic 3应用iOS端input type="number"无法唤起数字键盘问题

我之前在Ionic 3项目里也碰到过一模一样的iOS数字键盘问题，折腾了好一阵才找到几个靠谱的解决办法，分享给你：

方案1：改用type="tel"配合Ionic组件 #

iOS的WKWebView对type="number"的处理比较特殊，它默认会显示带字母的混合键盘（因为支持小数、负数输入），而type="tel"会直接唤起纯数字键盘，同时配合inputmode和pattern来限制输入内容，完美适配需求：

<ion-input type="tel" inputmode="numeric" pattern="[0-9]*" placeholder="请输入数字"></ion-input>

这个方案是我测试下来最有效的，Android端type="tel"也会唤起数字键盘，不会影响原有体验。

方案2：针对iOS平台动态切换输入类型 #

如果想保持Android端用type="number"的原生体验，可以通过Ionic的Platform服务检测系统，动态修改输入框类型：

首先在组件的TS文件中引入Platform：

import { Component, OnInit } from '@angular/core';
import { Platform } from 'ionic-angular';

@Component({
  selector: 'page-your-page',
  templateUrl: 'your-page.html'
})
export class YourPage implements OnInit {
  constructor(private platform: Platform) {}

  ngOnInit() {
    if (this.platform.is('ios')) {
      const numInput = document.getElementById('numeric-input') as HTMLInputElement;
      numInput.setAttribute('type', 'tel');
    }
  }
}

对应的HTML代码：

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

这样iOS端会自动切换到tel类型唤起纯数字键盘，Android端保持number类型的原有表现。

方案3：检查Ionic版本与WebView配置 #

如果上面的方案都无效，可能是你使用的Ionic 3版本存在兼容性bug：

• 尝试升级到Ionic 3的最新小版本（比如3.9.x），旧版本对iOS WKWebView的input属性支持可能有问题
• 确保你的项目已经切换到WKWebView（Ionic 3后期默认是WKWebView，旧项目可能还是UIWebView，后者对input属性支持更差）

为什么原代码无效？ #

iOS的WKWebView对type="number"的设计是允许输入小数、负号等特殊字符，所以默认会显示带字母的混合键盘（首行数字，下方字母），而inputmode="numeric"和pattern只能限制输入内容，无法强制唤起纯数字键盘——这是iOS WebView的原生行为，和Angular/Ionic的配置无关。

内容的提问来源于stack exchange，提问作者Abhee