input输入框控制输入的字符串符合数字格式

 如果需求的数字过大,超过了js的安全数(2的53次方),则可以输入字符串,控制字符串的输入规则。

<div>
    <input v-model="iptval" type="text" @keyup="iptKeyup($event)">
</div>

data(){
    return {
        iptval:"", 
    }
},
methods:{
    iptKeyup(e){
        this.iptval = this.iptControl(e.target.value);
        console.log(e.target.value); // 当前输入框的值
    },
    // 这里以两位小数举例
    iptControl(val){
        let newval = []; // 处理前的值的数组
        let newvalNum = []; // 处理后的值的数组
        val = val + ""; // 将val转化成字符串
        if(val!==""){ // 如果val为空字符串,不作处理
            newval = val.split(""); // 将val拆分成数组
            let indexOfPoint = newval.indexOf('.'); // 查询输入内容中是否有小数点.
            if(indexOfPoint > -1){ // 如果输入内容中有小数点
                // 保留第一个小数点后两位(限制两位小数)
                newval = newval.slice(0, (indexOfPoint+3)); 
                // 处理小数点后两位

                // 后两位都是小数点
                if(newval[indexOfPoint + 1] == "." && newval[indexOfPoint + 2] == "."){ 
                    newval.splice((indexOfPoint + 1),2);
                }
                // 后两位的第一位是小数点
                if(newval[indexOfPoint + 1] == "." && newval[indexOfPoint + 2] !== "."){ 
                    newval.splice((indexOfPoint + 1),1);
                }
                // 后两位的第二位是小数点
                if(newval[indexOfPoint + 1] !== "." && newval[indexOfPoint + 2] == "."){ 
                    newval.splice((indexOfPoint + 2),1);
                }
            }
            // 过滤空格和非数字、非小数点内容
            newval.map(item => {
                if(item !== " " && ((isNaN(item-0) == false) || item == ".")){ 
                    newvalNum.push(item)
                }
            });
            // 如果首位是小数点,去掉
            if(newvalNum[0] == "."){
                newvalNum.unshift(0)
            }
            // 如果首位是0,那第二位一定要是小数点
            if(newvalNum.length >= 2){
                if(newvalNum[0] == "0" && newvalNum[1] !== "."){
                      newvalNum.pop()
                }
            }
        }
        return newvalNum.join("")
      }
    }
}
</script>

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值