1、先上圖

2、CSS程式碼

<style>
        .pwd-box{
            display: none;
            width:310px;
            height: 220px;
            left:50%;
            top:10%;
            margin-left: -155px;
            position: absolute;
            border: none;
            background: white;
            z-index
 
: 101;
        }
        .pwd-box input[type="tel"]{
            width: 99%;
            height: 45px;
            color: transparent;
            position: absolute;
            top: 140px;
            left: 0;
            border: none;
            font-size: 18px;
            opacity: 0;
            z-index
 
: 1;
            letter-spacing: 35px;
        }
        .fake-box{
            width: 280px;
            margin-left: 15px;
            bottom: 2px;
            height: 41px;
            margin-top: 30px;
            border:1px solid #bfb6b6;
        }
        .fake-box input{
            width: 41px
 
;
            height: 41px;
            border: none;
            border-right: 1px solid #e5e5e5;
            text-align: center;
            font-size: 30px;
            margin:0 !important;
        }
        .fake-box input:nth-last-child(1){
            border:none;
        }
        #box-title{
            height: 40px;
            width:100%;
            border-bottom: 0.2px solid #e5e5e5;
        }
        #title-text{
            height: 30px;
            width: 200px;
            text-align: center;
            line-height: 27px;
            display: block;
            margin-left: 55px;
            margin-top: 10px;
        }
        #money-box{
            width: 100%;
            height: 50px;
        }
        #content-text{
            height: 30px;
            width: 200px;
            text-align: center;
            line-height: 27px;
            display: block;
            margin-left: 55px;
            margin-top: 10px;
            font-size: 22px;
        }
        #forget-pwd{
            margin-top:5px;
            margin-right: 15px;
            float: right;
            text-decoration:none;
            color: #666;
        }
    </style>

3、HTML程式碼

    <!--輸入支付密碼-->
<div class="pwd-box">
    <div id="box-title">
        <span id="title-text">請輸入支付密碼：</span>
    </div>
    <div id="money-box">
        <div id="money-title">
            <span id="title-text">話費充值</span>
        </div>
        <div id="money-content">
            <span id="content-text">￥30.0元</span>
        </div>
    </div>
    <input type="tel" maxlength="6" class="pwd-input" id="pwd-input">
    <div class="fake-box">
        <input type="password" readonly="">
        <input type="password" readonly="">
        <input type="password" readonly="">
        <input type="password" readonly="">
        <input type="password" readonly="">
        <input type="password" readonly="">
    </div>
    <div>
        <a id="forget-pwd" href="../paymentPwd.php">忘記密碼</a>
    </div>
</div>

4、js程式碼

$('.pwd-box').slideDown();
                            var $input = $(".fake-box input");
                            $("#pwd-input").on("input", function() {
                                var pwd = $(this).val().trim();
                                for (var i = 0, len = pwd.length; i < len; i++) {
                                    $input.eq("" + i + "").val(pwd[i]);
                                }
                                $input.each(function() {
                                    var index = $(this).index();
                                    if (index >= len) {
                                        $(this).val("");
                                    }
                                });
                                if (len == 6) {
                                    //提交支付
                                    $.ajax({
                                        url:"moneybag_pay.php",
                                        type:"post",
                                        dataType:"json",
                                        data:{batchcode:batchcode,pwd:pwd},
                                        success:function (data) {
                                            var code = data.code;
                                            if(code ===  -1){//支付密碼錯誤，清空輸入框
                                                $("#pwd-input").val("");
                                                $(".fake-box input").each(function() {
                                                    $(this).val("");
                                                });
                                            }
                                            alert(data.msg);
                                        }
                                    });
                                }
                            });