vue - 禁止input[number]输入 +、-、e 符号，并且只能输入两位小数

淩亂°似流年 2021-09-03 10:16 1161阅读 0赞

最近写的项目有要求通过键盘输入数字，不能输入 +、- 符号并且只能留两位小数，还有更高的要求：就是只能输入六位数字，控制最多只能输入三位整数，如果输入了四位包括四位以上的整数就要自动给它们加个小数点，变成小数。研究了许久才找到了解决方法，分享给大家参考使用。

### 一、html代码 ###

这里的 `onkeyup="value=value.replace(/[^\d^\.]+/g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')"`这段代码的作用就是不允许输入 +、-、e 。

### 二、js 代码 ###

// 监听输入框
        changeInput() {
        // 这里是控制小数点后面的个数，这里的是只能输入两位小数
          let inputVal = this.inputVal.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
          
          // 这里是控制输入的位数，大于六位就要将第六位之后的清掉
          if(inputVal.length>6){
            inputVal=inputVal.slice(0,6);   //  取前六位
            if(inputVal.indexOf('.')==-1){  // 没有小数点
              if(inputVal.length>3){
              	// 这里开始做补充小数点的操作
                let arr = inputVal.toString().split("");
                arr.splice(3,0,'.');
                let str = arr.join('');
                inputVal = parseFloat(str);
              }
            }
            console.log('-----------2222222-------->',inputVal);
          }else{
            if(inputVal.indexOf('.')==-1){  // 没有小数点
              if(inputVal.length>3){
                let arr = inputVal.toString().split("");
                arr.splice(3,0,'.');
                let str = arr.join('');  //ab-cdef
                inputVal = parseFloat(str);
              }
            }
            console.log('------------11111------->',inputVal);
          }
        },

这样就可以实现我们的需求啦！