模仿支付宝输入支付密码的UI，带JavaScript 密码输入校验功能

新开发一个功能，用到了一个模拟支付宝手机端输入密码的的 UI 界面，整体功能还不错。下面看截图。附件里也提供了整套的源码下载。

HTML 代码：

    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0">
    <title>移动端密码输入框</title>
    <script src="passwordBox.min.js"></script>
    <script>

        window.onload=function(){
            /**
             * init传入参数依次是：正确密码(传空时不对比输入是否正确),密码键盘背景，标题，副标题
             * */
            PwdBox.init('123456','http://puep.qpic.cn/coral/Q3auHgzwzM4fgQ41VTF2rNtI54KEzIMl2UNCHkMbzhTJBqpdTlpT1g/0','请输入支付密码','安全支付环境，请放心使用！');
            /**
             *res格式：{status:'true或false',password:'用户输入的密码'}
             *
             */
            PwdBox.show(function(res){
                if(res.status){
                    //重置输入
                    alert('密码正确');
                    //关闭并重置密码输入
                    PwdBox.reset();
                }else{
                    alert(JSON.stringify(arguments));
                }
            });
        };
    </script>

JavaScript 代码

就是上面 HTML 代码中的 passwordBox.min.js 文件源码。

var pwdBox = PwdBox = {
    template: '.flexable{display: -webkit-box;} .flexable>div{-webkit-box-flex: 1;} .flexable.password>div{opacity: 0};.flexable.password>div.active{opacity: 1 !important;}.password{ margin: 12px 25px;}.password>div{height:46px;line-height:46px;text-align:center}.password>div:first-child{border-top-left-radius:5px;border-bottom-left-radius:5px}.password>div:last-child{border-top-right-radius:5px;border-bottom-right-radius:5px}.input-box .flexable>div{height:53px}.input-box .flexable>div:active{background:rgba(0,200,200,.5)}.list-block .item-title{font-weight:normal!important;font-size:14px}ul li{position:relative}.close{position:absolute;top:4px;left:4px;font-size:20px;width:22px;text-align:center} h1.title{height:50px;font-size:18px;line-height:50px;text-align:center;margin: 0;} .notice{height:30px;line-height:30px;font-size:12px;text-align:center;margin-bottom:15px;color: #00a9dd;}' + '' + '' + '×' + '支付密码' + '' + '●' + '●' + '●' + '●' + '●' + '●' + '' + '' + '请输入支付密码！' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '',
    passwordOrg: '',
    password: '',
    inited: false,
    callback: function(res) {
        if (res) {
            alert('密码正确');
            document.querySelector('.password-box').style.display = 'none'
        } else {
            alert('密码错误')
        }
    },
    init: function(password, keyboard, title, notice) {
        if (pwdBox.inited) {
            return
        }
        console.log(document.getElementsByTagName('body'));
        document.getElementsByTagName('body')[0].innerHTML += pwdBox.template;
        if (keyboard) {
            document.querySelector('.password-box .inner-box').style.backgroundImage = keyboard
        }
        title && (document.querySelector('h1.title').innerText = title);
        notice && (document.querySelector('.password-box .notice').innerText = notice);
        password && (pwdBox.passwordOrg = password);
        document.querySelector('.close').addEventListener('click',
        function() {
            document.querySelector('.password-box').style.display = 'none';
            pwdBox.reset()
        });
        var inputs = document.querySelectorAll('.input-key');
        for (var i = 0; i < inputs.length; i++) {
            inputs[i].addEventListener('touchstart',
            function(e) {
                onTouch(this.getAttribute('data-label'))
            },
            true)
        }
        var onTouch = function(label) {
            if (label == 'del') {
                pwdBox.password = pwdBox.password.substr(0, pwdBox.password.length - 1);
                pwdBox.onChange()
            } else {
                pwdBox.password += label;
                pwdBox.onChange();
                if (pwdBox.password.length == 6) {
                    if (pwdBox.passwordOrg) {
                        if (pwdBox.password == pwdBox.passwordOrg) {
                            pwdBox.callback({
                                status: true,
                                password: pwdBox.password
                            })
                        } else {
                            pwdBox.callback({
                                status: false,
                                password: pwdBox.password
                            })
                        }
                    } else {
                        pwdBox.callback({
                            status: true,
                            password: pwdBox.password
                        })
                    }
                }
            }
        };
        pwdBox.inited = true
    },
    onChange: function() {
        var texts = document.querySelectorAll('.password>div');
        for (var i = 0; i < texts.length; i++) {
            texts[i].style.opacity = 0
        }
        for (i = 0; i < pwdBox.password.length; i++) {
            texts[i].style.opacity = 1
        }
    },
    reset: function() {
        pwdBox.password = '';
        pwdBox.onChange();
        document.querySelector('.password-box').style.display = 'none'
    },
    show: function(callback) {
        if (callback) {
            pwdBox.callback = callback
        }
        document.querySelector('.password-box').style.display = 'block'
    }
};

使用这个，主要是解决二维码密码的设置，可以来体验下功能：https://nima.vip/qr/image2qr.... 已经上线了。