在移动端内嵌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端输入中文也是如此:


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 {
                                // 否则去掉最后一位
                                this.inputNum = val.substr(0,length_1);
                            }
                        // 如果除去最后两位前面的合法并且最后两位都是小数点,就去掉最后一位
                        } else if (reg.test(val.substr(0,length_2)) && val.charAt(length_1) == '.' && val.indexOf('.') == length_2) {
                            this.inputNum = val.substr(0,length_1);
                        // 否则
                        } else  {
                            // 如果值只有一位且是小数点,或者值有两位且是‘0.’,则把值置为‘0.’
                            if(val == '.' || val.substr(0,length_1) == '0.'){
                                this.inputNum = '0.';
                            } else {
                               // 否则提示并清空
                                let instance = Toast('请输入正确的数值');
                                setTimeout(() => {
                                    instance.close();
                                    this.inputNum = '';
                                }, 2000);
                            }
                        }
                    } else {
                    // 值合法的时候
                     // 如果第一位为0且第二位存在且第二位不是小数点,提示并清空值
                        if(val.charAt(0) == 0 && val.charAt(1) && val.charAt(1) !== '.'){
                            let instance = Toast('请输入正确的数值');
                            setTimeout(() => {
                                instance.close();
                                this.inputNum = '';
                            }, 2000);
                        } else {
                          // 否则保留值
                            this.inputNum = val;
                        }
                    }
                }

            }
下面是在研究过程中改造的自定义键盘组件:




你可能感兴趣的:(在移动端内嵌H5页面中数字框调用数字键盘,且只允许输入0-9和小数点的总结)