Description
以下是2020年的测试及方案
网上唤起数字键盘的方案有很多，根据网上的方案和自己的实践，总结如下
手上仅有ios设备(iPhone 6s Plus,sv:13.4.1)，未测试android
文本
<input type="text"/>type="text"输入框通常唤起用户的默认键盘，比如我用的ios笔画输入法，唤起时这样
这个只是用于对比。
文本+pattern
<inpyt type="text" pattern="[0-9]*"/>以上代码在ios上可以显示数字键盘
尝试加入小数等，ios上则直接切换成普通的文字键盘
tel
<input type="tel" />tel则多了＋×＃这几个键
tel+pattern
<input type="tel" pattern="[0-9]*"/>这个效果同tel
number
<input type="number"/>包含小数点等，也能切换到其它输入法上
number+pattern
<input type="number" pattern="[0-9]*"/>这个效果同type="text"带pattern的效果
inputmode="numeric"
<input type="text" inputmode="numeric"/>这个效果同type="text"带pattern的效果
container+模拟
实在不行，咱就自己做，就像上图这样的，输入界面，输入键盘我自己搞这总行了吧？
这种对于输入密码、金额等场景下确实也是合适的，但是因为无光标或有些模拟的光标不如原生的效果，如果输入错误只能从后删除，不能像原生input那样可以改变光标的位置仅删除光标处的数字。
模拟的场景对于高要求的UI，少量的数字输入是可行的，再复杂了那真不如用原生的，因为要处理的细节还挺多的。
关于取值
综上,最后在实践中使用<input type="number"/>进行数字的输入
在使用过程中,type="number"除了数字和小数点外,+,-,e这三个字符也可以输入,因为可以输入科学计数,比如输入 2e5这样的数字
如果用户输入的是合法的数字(包含科学计数的形式)形式,则我们可以使用input.value拿到原始值,也可以使用input.valueAsNumber拿到转换后的数字,如
简便起见,对于type="number"的使用取valueAsNumber来做为最终用户的输入。
如果用户输入是非法的，不能转换成数字的，比如+2eeee333这样的输入。
我们可以看到通过value并不能取到用户的原始输入+2eeee333，同时valueAsNumber也不能转换成合法数字，返回NaN
这次的需求需要根据输入框有没有用户的输入进行不同的界面展示，那我要检测输入框内有没有用户的输入该如何办？
当输入框无用户输入时，此时
value是空，valueAsNumber依然是NaN，所以我们就不能很好的区分初始化时的无值和用户输入非法值。
这时候就需要checkValidity方法进行处理了：https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement
对于无输入的情况：
虽然value是空，valueAsNumber为NaN，但是checkValidity是true
对于非法的情况
虽然value是空，valueAsNumber为NaN，但是checkValidity是false
我们可以通过这些API进行识别是否是合法数字和用户是否进行了输入等处理。