mobie-web开发6位支付密码验证

第一次想到的方式是直接使用input，加background给出6个输入框，maxlength做限定，会遇到一个问题，letter-spacing没有办法实现大小屏幕适应，因为它不支持%比。
于是开始了第二种方式，就是放6个input，在PC上调试是没有问题的。放到手机上查看问题就出现了，每个输入框focus的时候都会跳跃一下。。于是再次放弃。
最后的解决办法是用div+img画密码，用透明的input去接受密码

html

        var content = '<div class="popup-cover">';
            content += '<div class="popup-window">';
            content += '<div class="popup">';
            content += '<div class="popup-title text-center padding-vertical">';
            content += '<p>设置支付密码</p></div>';
            content += '<div class="form-group pure-u-g">';
            content += '<label class="pure-u-1-5">设置</label>';
        content += '<div class="pure-u-4-5 setpassword">';
        content += '<div class="pure-u-1-6 text-center password-div"><img class="hidden" width="100%" src="http://7xov8j.com2.z0.glb.qiniucdn.com/password-point.png" /></div>';
        content += '<div class="pure-u-1-6 text-center password-div"><img class="hidden" width="100%" src="http://7xov8j.com2.z0.glb.qiniucdn.com/password-point.png" /></div>';
        content += '<div class="pure-u-1-6 text-center password-div"><img class="hidden" width="100%" src="http://7xov8j.com2.z0.glb.qiniucdn.com/password-point.png" /></div>';
        content += '<div class="pure-u-1-6 text-center password-div"><img class="hidden" width="100%" src="http://7xov8j.com2.z0.glb.qiniucdn.com/password-point.png" /></div>';
        content += '<div class="pure-u-1-6 text-center password-div"><img class="hidden" width="100%" src="http://7xov8j.com2.z0.glb.qiniucdn.com/password-point.png" /></div>';
        content += '<div class="pure-u-1-6 text-center password-div"><img class="hidden" width="100%" src="http://7xov8j.com2.z0.glb.qiniucdn.com/password-point.png" /></div>';
        content += '</div>';
        content += '</div>';
            content += '<div class="form-group pure-u-g">';
            content += '<label class="pure-u-1-5">确认</label>';
        content += '<div class="pure-u-4-5 resetpassword">';
        content += '<div class="pure-u-1-6 text-center password-div"><img class="hidden" width="100%" src="http://7xov8j.com2.z0.glb.qiniucdn.com/password-point.png" /></div>';
        content += '<div class="pure-u-1-6 text-center password-div"><img class="hidden" width="100%" src="http://7xov8j.com2.z0.glb.qiniucdn.com/password-point.png" /></div>';
        content += '<div class="pure-u-1-6 text-center password-div"><img class="hidden" width="100%" src="http://7xov8j.com2.z0.glb.qiniucdn.com/password-point.png" /></div>';
        content += '<div class="pure-u-1-6 text-center password-div"><img class="hidden" width="100%" src="http://7xov8j.com2.z0.glb.qiniucdn.com/password-point.png" /></div>';
        content += '<div class="pure-u-1-6 text-center password-div"><img class="hidden" width="100%" src="http://7xov8j.com2.z0.glb.qiniucdn.com/password-point.png" /></div>';
        content += '<div class="pure-u-1-6 text-center password-div"><img class="hidden" width="100%" src="http://7xov8j.com2.z0.glb.qiniucdn.com/password-point.png" /></div>';
        content += '</div>';
        content += '</div>';
        content += '<p class="color-red">{{passwordMsg}}</p>';
        content += '<div class="padding-vertical">';
            content += '<button ng-click="setPassword()" class="btn btn-info full-width">确定</button></div>';
            content += '</div>';
            content += '</div>';
            content += '</div>';

css用了bootstrap和雅虎的pure.css

.popup-cover{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom:0;
    background: #333;
    opacity: 0.85;
    z-index: 999;
}
.popup-window{
    width: 80%;
    z-index: 1000;
    margin-top:50%;
    margin-left: 10%;
    position: relative;
    background: #fff;
    border-radius: 2%;
}
.popup{margin:10px;}
.padding-bottom{
    padding-bottom: 10px;
}
.padding-top{
    padding-top: 10px;
}
.padding-vertical{
    padding: 10px 0;
}
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    position: relative;
    min-height: 1px;
    padding-right: 0;
    padding-left: 0;
}
.line-height-34{
    line-height: 34px;
    padding:0;
}
.card-info{
    border: none;
}
body{
    background: #efefef;
}
.container-padding-width{
    padding: 0 15px;
}
.form-group label{
    line-height: 34px;
}
.form-control{
    border-radius: 0;
}
.circle {
    width: 10px;
    height: 10px;
    background: #000;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    border-radius: 25px;
}
.password-div{
    border: 1px solid #999;
    height:34px;
}
.password-div img{
    width: 100%;
    height: 100%;
}
.password-input{
    opacity: 0;
    position: fixed;
    top: -1000px;
}
.password-border-on{
    border:1px solid #238efa;
}

js控制效果代码:

$('#popup').bind("DOMSubtreeModified", function() {
        console.log('弹窗');
        var changePasswordStatus = function(divclass,inputid,olddivclass){
            $(divclass).click(function(e){
                $(olddivclass).removeClass('password-border-on');
                $(divclass).addClass('password-border-on');
                $(inputid).focus();
            })
            $(inputid).on('input',function(e){
                $(divclass+' div img').each(function(e){
                    if(e<$(inputid).val().length){
                        $(this).removeClass('hidden');
                    }
                    if($(inputid).val().length<(6-$(divclass+' div img.hidden').length)){
                        $($(divclass+' div img')[$(inputid).val().length]).addClass('hidden');
                    }
                })

            })
        }
        changePasswordStatus('.setpassword','#setpassword','.resetpassword');
        changePasswordStatus('.resetpassword','#resetpassword','.setpassword');
        changePasswordStatus('.inputpassword','#inputpassword','.setpassword');

    });