IOS上输入框type=number不生效

需求输入框只能输入数字和小数点。
用<input type="number"/> 安卓可以实现，但是ios不行。研究了下vant源码，它实现了。

image.png

其实就是多加一个 inputmode 一个 HTML 全局属性；

它可以帮助具有 on-screen 键盘的浏览器或设备在用户为某些输入或 textarea 元素选择区域时决定显示哪个键盘。

• inputmode 属性不会改变浏览器解释输入的方式。它指示浏览器根据各种输入显示哪个键盘。
• 输入模式是一个非常古老的概念，但只有部分浏览器采用了它。一些主要的浏览器是 iOS 中的 Safari 和 Android 中的 chrome。之前它是由 Firefox 在 2012 年实现的，但几个月后就被弃用了。
• inputmode 接受许多值。让我们一一看看。

用法：

<input type ="number" id="age" inputmode="numeric" />

inputmode 属性可以具有以下值。

1. None:
   <input type="text" inputmode="none" />
   无虚拟键盘。在应用程序或者站点需要实现自己的键盘输入控件时很有用。

2. Text:
   <input type="text" inputmode="text" />
   使用用户本地区域设置的标准文本输入键盘。
   

   image.png

3. Numeric:
   数字输入键盘，所需要的就是 0 到 9 的数字，设备可能也可能不显示减号键。

   
   image.png

4. Decimal
   小数输入键盘，包含数字和分隔符（通常是“ . ”或者“ , ”），设备可能也可能不显示减号键。

image.png

5. search
   为搜索输入优化的虚拟键盘，比如，返回键可能被重新标记为“搜索”，也可能还有其他的优化。

   
   image.png
6. email
   为邮件地址输入优化的虚拟键盘，通常包含"@"符号和其他优化。表单里面的邮件地址输入应该使用
   <input type="email">
   image.png
7. url
   为网址输入优化的虚拟键盘，比如，“/”键会更加明显、历史记录访问等。表单里面的网址输入通常应该使用 <input type="url">

image.png

8. tel
   电话输入键盘，包含 0 到 9 的数字、星号（*）和井号（#）键。表单输入里面的电话输入通常应该使用 <input type="tel">

参考：https://vimsky.com/examples/usage/html-inputmode-attribute.html
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/inputmode