js html 没填的数字自动补为0

最新推荐文章于 2021-09-03 23:23:10 发布

微辣米粉

最新推荐文章于 2021-09-03 23:23:10 发布

阅读量2.1k

点赞数

分类专栏： js 前端文章标签： js html javascript

本文链接：https://blog.csdn.net/tuntun1120/article/details/76419656

版权

前端同时被 2 个专栏收录

26 篇文章 1 订阅

订阅专栏

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>
        TITLE
    </title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #wrap {
            margin:auto;
            width: 300px;
        }
        #wrap input[type=text]{
            width:30px;
            height:20px;
            float:left;
            text-align:center;
        }
    </style>

</head>
<body>
<div id="wrap">
    <input type="text" id= "tb1"/>
    <input type="text" id= "tb2"/>
    <input type="text" id= "tb3"/>
    <input type="text" id= "tb4"/>
    <input type="text" id= "tb5"/>
    <input type="text" id= "tb6"/>
</div>

<script type="text/javascript">
    onload = function(){
        var txts = wrap.getElementsByTagName("input");
        for(var i = 0; i<txts.length;i++){
            var t = txts[i];
            t.setAttribute("maxlength","1 ");
            t.index = i;
            t.οnkeyup=function(){
                var next = this.index + 1;
                if(next > txts.length - 1) return;
                txts[next].focus();
            }
        }
    };



    var idInputObj = document.getElementById("tb6");



    //tb6的离焦事件
    idInputObj.onblur = function(){

        //获取所有input标签
        var inputs = wrap.getElementsByTagName("input");

        //循环标签
        for(var i = 0; i<inputs.length; i++){


            //第一个标签
            var _input = inputs[i];

            //如果是第一位
            if( i ==0 ){
                if( _input.value == null || _input.value == ""){
                    _input.value = "";
                }
            }else{
                var before = inputs[i-1].value;

                //如果前一位是空
                if( before != null && before != "" ){
                    //如果前一位不是空，填充0
                    if(_input.value == "" || _input.value == null){
                        _input.value = 0;
                    }
                }
            }


        }
    };





</script>

</body>
</html>

前面几位空的就空着，从填写数字的那位开始，往后面没有填的就补为0.

可以用于财务的个十百千万。