微信端html只显示数字键盘,在移动端内嵌H5页面中数字框调用数字键盘，且只允许输入0-9和小数点的总结...

最初是想要在H5页面中输入数字的时候调起数字键盘，且只能输入数字和小数点，并且小数点后最多保留两位小数

实践证明：

1.input：

type = 'number'时， 当输入的为非法数字 例如包括-+等，则在取value的值时判断为非数字就会将value自动置为‘’，

且在ios中number类型不能成功调起数字键盘，需要使用pattern调取数字键盘，但是此时系统键盘没有小数点

type = 'tel' 调起数字键盘 没有number value为空的问题

同样在ios没有小数点

type = "text" pattern="[0-9]*" 在安卓无法调取数字键盘 ，在ios能调起数字键盘没有小数点，同时能输入-+/

其他type 则能输入字符等

2.ios原生的可以设置keyboard type = decimal pad . 这个样子的只能用原生.

3.无法实现与web端一致的实时校验 keydown + keyup == input H5只有input

4.前端自己定制键盘，存在安全性问题 且需要禁止系统键盘，并且使用disabled禁止之后 没有光标了也是一个问题

最终解决，在input的时候做校验，但不是实时校验，因为输入字符串的时候编辑完一串字符串点击字符串才会触发input，其实在pc端输入中文也是如此：

v-model.trim="inputNum" @input="saveNumberData" maxlength="20">

methods:

saveNumberData () {

this.checkFloatNumber(this.inputNum);

}

checkFloatNumber (val){

let reg = new RegExp(/^[0-9]+(.[0-9]{1,2})?$/);

let length_1 = val.length-1;

let length_2 = val.length-2;

if (val) { // 当输入了值

if (!reg.test(val)) { // 并且值不合法

if (reg.test(val.substr(0,length_1))) { // 如果除去最后一位前面的合法

if(val.charAt(length_1) == '.' && val.indexOf('.') == length_1) {

// 当最后一位为小数点并且值中只有一个小数点，则保留值

this.inputNum = val;

} else {

// 否则去掉最后一位