实时检测输入数据保留两位小数(偶尔发现有bug就跑去修改)

最新推荐文章于 2024-04-29 19:04:15 发布

yeni784742321

最新推荐文章于 2024-04-29 19:04:15 发布

阅读量790

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： js 函数保留两位小数

本文链接：https://blog.youkuaiyun.com/yeni784742321/article/details/71514785

js 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现实时数据验证的方法，并通过字符串截取确保输入数据最多保留两位小数。此方法适用于需要实时反馈的数据输入场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实时检测输入数据</title>
    <script>
        window.onload=function () {
            var test = document.getElementById("test");
            function check() {
                var val = test.value;
                //判断是否为非数值
                if(isNaN(val-0)){
                    test.value = parseFloat(val);//连续输入两个点时会回删两个连续的小数点（bug）
                }
                //保留两位小数:
                /*test.value = parseFloat(test.value).toFixed(2);//输入的整数会立刻转换为保留两位的小数，bug*/
                //字符串拼接方法
                /*var dotIndex = val.indexOf(".");
                var dotBefore = val.substr(0,dotIndex+1);
                if(dotIndex!=-1){
                    var dotAfter = val.substr(dotIndex+1,2);
                    test.value = dotBefore+dotAfter;
                }*/
                //字符串截取方法
                var dotIndex = val.indexOf(".")
                if(dotIndex!=-1) {              //非零为真
                    test.value = val.substr(0,dotIndex+3);
                }
                //判断是否为NaN--因为parseFloat()没有数字转换时会返回NaN
                if(test.value=="NaN"){
                    test.value = "";
                }
            }
            test.onkeyup=check;
        }
    </script>
</head>
<body>
    <!--保留两位小数:(网上找的具体方法)
                 1、判断输入的是不是数字（建议用onchange事件判断每一个输入的字符）
                 2、判断是否有小数点（且只有一个）
                 3、判断小数点后有几个字符（lastInexOf）
                 这种方法可以实现，但很麻烦
                 楼主最好在onchange触发时用正则匹配输入框中的字符串-->
    <!--整个功能网上的正则表达式写法：onkeyup="this.value=/^\d+\.?\d{0,2}$/.test(this.value) ? this.value : ''"
        输入第三位小数会清空输入框（我不大期望这样）-->
    <input type="text" id="test">
</body>
</html>