input的属性type=“number“的兼容性问题

@[TOC]input的属性type="number"的兼容性问题

项目场景：h5的评分活动

最近做了一个h5的评分活动，需要兼容ios和安卓，为了优化用户体验，需要指定调起数字键盘。

---

问题描述：ios无法调起数字键盘

我大安卓一直没毛病，通过type="number"设定，可是到了ios上却只能调起默认键盘，虽说不是大问题，但也很困扰。

<input type="number">

---

原因分析：浏览器不支持

在查阅了很多资料后，终于发现了问题所在
MDN中写道：**不支持 “number” 类型的浏览器会改用标准的 “text” 输入框。**不得不说，苹果就是与众不同。。。不过，为什么网上流行的移动端框架为什么没有这个问题呢？比如vant，那就来看一下他们是怎么实现的:

仔细观察可以发现vant渲染出来的输入框不仅仅有type属性，还有inputmode属性，这是什么？
MDN中是这样说的：
inputmode 全局属性 是一个枚举属性，它提供了用户在编辑元素或其内容时可能输入的数据类型的提示。如果没有设置这个属性，它的默认值是 “text”，表明使用本地的标准文本输入键盘。
也就是说当浏览器不支持type="number"时，又没有inputmode属性，只能调起默认键盘。那如果在不识别type="number"时，加上inputmode属性呢？结果当然是成功的
inputmode的可选属性如下：

属性	事件
none	无虚拟键盘。在应用程序或者站点需要实现自己的键盘输入控件时很有用。
text	使用用户本地区域设置的标准文本输入键盘。
decimal	小数输入键盘，包含数字和分隔符（通常是“ . ”或者“ , ”），设备可能也可能不显示减号键。
numeric	数字输入键盘，所需要的就是0到9的数字，设备可能也可能不显示减号键。
tel	数字输入键盘，所需要的就是0到9的数字，设备可能也可能不显示减号键。
search	为搜索输入优化的虚拟键盘，比如，返回键可能被重新标记为“搜索”，也可能还有其他的优化。
email	为邮件地址输入优化的虚拟键盘，通常包含"@"符号和其他优化。
url	为网址输入优化的虚拟键盘，比如，“/”键会更加明显、历史记录访问等

---

终极解决方案：

所以，最后再加上inputmode属性，即可解决。ios端正常调起带小数点的数字键盘

<input type="number" inputmode="decimal">

如果还不行，就使用pattern属性

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

最后，有些组件可能无法将属性编译到input上
那就

let dom=document.querySelectorAll("input")
				dom[0].type='number'
				dom[0].pattern='[0-9]*'
				dom[0].inputmode='numeric'
				dom[1].type='number'
				dom[1].pattern='[0-9]*'
				dom[1].inputmode='numeric'