只能输入数字和小数，限制小数的位数

最新推荐文章于 2021-06-05 12:54:11 发布

_阿毛

最新推荐文章于 2021-06-05 12:54:11 发布

阅读量1k

点赞数

分类专栏：实战得真知 js+jquery 处理数字文章标签：输入小数并限制位数

本文链接：https://blog.csdn.net/amao_aguai/article/details/86704049

版权

实战得真知同时被 3 个专栏收录

37 篇文章 0 订阅

订阅专栏

js+jquery

31 篇文章 0 订阅

订阅专栏

处理数字

3 篇文章 0 订阅

订阅专栏

直接上代码了
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>合二为一</title>
</head>
<body>
    <div>
        <label for="input1">输入数字和小数，小数最多1位</label>
        <input id="input1" type="text" onkeyup="numLimit(this,1)" onafterpaste="numLimit(this,1)">
    </div>
    <div>
        <label for="input3">输入数字和小数，小数最多3位</label>
        <input id="input3" type="text" onkeyup="numLimit(this,3)" onafterpaste="numLimit(this,3)">
    </div>
</body>
<script src="jquery-1.8.3.min.js"></script>
<script>
    //限制只能输入数字和小数的部分：
    function numLimit(obj,num){
        var str = obj.value;
        var len1 = str.substr(0, 1);
        var len2 = str.substr(1, 1);
        //如果第一位是0，第二位不是点，就用数字把点替换掉
        if (str.length > 1 && len1 == 0 && len2 != ".") {
            str = str.substr(1, 1);
        }
        //第一位不能是.
        if (len1 == ".") {
            str = "";
        }
        //限制只能输入的小数点位数
        if (str.indexOf(".") != -1) {
            var str_ = str.substr(str.indexOf(".") + 1);
            if (str_.indexOf(".") != -1) {//如果出現两个小数点，就只要第二个小数点之前的部分
                str = str.substr(0, str.indexOf(".") + str_.indexOf(".") + 1);
                console.log(str)
            }else{//一个小数点
                if(str_.length>num){
                    str = str.substr(0, str.indexOf(".") + num + 1);
                }
            }
        }
        //正则替换，保留数字和小数点
        str = str.replace(/[^\d^\.]+/g,'');
        str = str.replace(/\.\d{num+1}$/,'');
        //回显操作后的数据给input框*
        obj.value = str;
    }
</script>
</html>

补充：如果可限制可不限制的话，只需要传个布尔值即可，不限制位数的话，传个false即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>合二为一</title>
</head>
<body>
    <div>
        <label for="input1">输入数字和小数，小数最多1位</label>
        <input id="input1" type="text" onkeyup="numLimit(this,1)" onafterpaste="numLimit(this,1)">
    </div>
    <div>
        <label for="input3">输入数字和小数，不限制小数位数</label>
        <input id="input3" type="text" onkeyup="numLimit(this,false)" onafterpaste="numLimit(this,false)">
    </div>
</body>
<script src="jquery-1.8.3.min.js"></script>
<script>
    //限制只能输入数字和小数的部分：
    function numLimit(obj,num){
        var str = obj.value;
        var len1 = str.substr(0, 1);
        var len2 = str.substr(1, 1);
        //如果第一位是0，第二位不是点，就用数字把点替换掉
        if (str.length > 1 && len1 == 0 && len2 != ".") {
            str = str.substr(1, 1);
        }
        //第一位不能是.
        if (len1 == ".") {
            str = "";
        }
        //限制只能输入的小数点位数
        if (str.indexOf(".") != -1) {
            var str_ = str.substr(str.indexOf(".") + 1);
            if (str_.indexOf(".") != -1) {//如果出現两个小数点，就只要第二个小数点之前的部分
                str = str.substr(0, str.indexOf(".") + str_.indexOf(".") + 1);
                console.log(str)
            }else{//一个小数点
            	if(num){//如果是数字就限制小数位数，如果是false则不限制小数位数
	                if(str_.length>num){
	                    str = str.substr(0, str.indexOf(".") + num + 1);
	                }
	            }
            }
        }
        //正则替换，保留数字和小数点
        str = str.replace(/[^\d^\.]+/g,'');
        str = str.replace(/\.\d{num+1}$/,'');
        //回显操作后的数据给input框*
        obj.value = str;
    }
</script>
</html>