master

分支 (1)

管理

管理

master

wxPhone
/
me-b-safe4.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>修改密码</title>
    <link rel="stylesheet" href="./css/same-css.css">
</head>
<style>
    .wrap {
        margin: 10px;

    }

    .inputBoxContainer {
        /*width: 240px;*/
        height: 50px;
        margin: 0 auto;
        position: relative;
    }

    .inputBoxContainer .bogusInput {
        /*width: 100%;*/
        height: 100%;
        border: #cccccc 1px solid;
        /*border-radius: 7px;
        -moz-border-radius: 7px;
        -webkit-border-radius: 7px;*/
        overflow: hidden;
        position: absolute;
        z-index: 0;
    }

    .inputBoxContainer .realInput {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        filter: alpha(opacity=0);
        -moz-opacity: 0;
        opacity: 0;
    }

    .inputBoxContainer .bogusInput input {
        padding: 0;
        width: 16.3%;
        height: 100%;
        float: left;
        background: #ffffff;
        text-align: center;
        font-size: 20px;
        border: none;
        border-right: #cccccc 1px solid;
    }

    .inputBoxContainer .bogusInput input:last-child {
        border: none;
    }

    .confirmButton {
        width: 80%;
        height: 45px;
        border-radius: 7px;
        -moz-border-radius: 7px;
        -webkit-border-radius: 7px;
        background: #feb696;
        color: #fff;
        border: none;
        display: block;
        font-size: 16px;
        margin: 30px auto;
        margin-bottom: 20px;
    }

    .showValue {
        width: 240px;
        height: 22px;
        line-height: 22px;
        font-size: 16px;
        text-align: center;
        margin: 0 auto;
    }

    .head-word {
        text-align: center;
        color: #666;
        margin-top: 55px;
        margin-bottom: 33px;
    }
</style>

<body>
<div class="wrap">
    <p class="head-word">请确认新的支付密码</p>
    <div class="inputBoxContainer" id="inputBoxContainer">
        <input type="text" class="realInput" />
        <div class="bogusInput">
            <input type="password" maxlength="6" disabled/>
            <input type="password" maxlength="6" disabled/>
            <input type="password" maxlength="6" disabled/>
            <input type="password" maxlength="6" disabled/>
            <input type="password" maxlength="6" disabled/>
            <input type="password" maxlength="6" disabled/>
        </div>
    </div>
    <button id="confirmButton" class="confirmButton">完成</button>

</div>
<script>
    (function () {
        var container = document.getElementById("inputBoxContainer");
        boxInput = {
            maxLength: "",
            realInput: "",
            bogusInput: "",
            bogusInputArr: "",
            callback: "",
            init: function (fun) {
                var that = this;
                this.callback = fun;
                that.realInput = container.children[0];
                that.bogusInput = container.children[1];
                that.bogusInputArr = that.bogusInput.children;
                that.maxLength = that.bogusInputArr[0].getAttribute("maxlength");
                that.realInput.oninput = function () {
                    that.setValue();
                }
                that.realInput.onpropertychange = function () {
                    that.setValue();
                }
            },
            setValue: function () {
                this.realInput.value = this.realInput.value.replace(/\D/g, "");
                console.log(this.realInput.value.replace(/\D/g, ""));
                var real_str = this.realInput.value;
                for (var i = 0; i < this.maxLength; i++) {
                    this.bogusInputArr[i].value = real_str[i] ? real_str[i] : "";
                }
                if (real_str.length >= this.maxLength) {
                    this.realInput.value = real_str.substring(0, 6);
                    this.callback();
                }
            },
            getBoxInputValue: function () {
                var realValue = "";
                for (var i in this.bogusInputArr) {
                    if (!this.bogusInputArr[i].value) {
                        break;
                    }
                    realValue += this.bogusInputArr[i].value;
                }
                return realValue;
            }
        }
    })();
    boxInput.init(function () {
        getValue();
    });
    document.getElementById("confirmButton").onclick = function () {
        getValue();
    };
    function getValue() {
//        document.getElementById("showValue").innerText = boxInput.getBoxInputValue();
        console.log(boxInput.getBoxInputValue());
        if(boxInput.getBoxInputValue().length === 6){
            document.getElementById("confirmButton").style.backgroundColor = '#fe8550';
        }else{
            document.getElementById("confirmButton").style.backgroundColor = '#feb696';
            return false;
        }
    }


</script>
</body>

</html>