JS仿支付宝多框隐藏输入

特效介绍：

CSS样式

.input {
	width:330px;
	margin:auto;
	margin-bottom:20px;
}
input:last-child {
     border-right: 1px solid #999;
 }
input {
    border-top: 1px solid #909090;
    border-bottom: 1px solid #909090;
    border-left: 1px solid #909090;
    border-right: 1px solid #909090;
    width: 45px;
    height: 45px;
    outline:none;
    font-family: inherit;
    font-size: 28px;
    font-weight: inherit;
    text-align: center;
    line-height: 45px;
    color: #c2c2c2;
    background: rgba(255,255,255,0);
    border-radius: 5px;
}
.showNum{
    width: 300px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border: 1px solid #cccccc;
    cursor: pointer;
	margin:auto;
}

HTML结构

<div class="input">
<input type="password" class="inpVal1" placeholder="｜" maxlength="1">
<input type="password" class="inpVal2" placeholder="｜" maxlength="1">
<input type="password" class="inpVal3" placeholder="｜" maxlength="1">
<input type="password" class="inpVal4" placeholder="｜" maxlength="1">
<input type="password" class="inpVal5" placeholder="｜" maxlength="1">
<input type="password" class="inpVal6" placeholder="｜" maxlength="1">
</div>
<p class="showNum">单击显示密码..</p>

javaScript结构

/*模拟支付宝的密码输入形式*/
(function (window, document) {
var showNum=document.getElementsByClassName('showNum')[0];
showNum.onclick=function(){
    var inpVal1=document.querySelector('.inpVal1').value;
    var inpVal2=document.querySelector('.inpVal2').value;
    var inpVal3=document.querySelector('.inpVal3').value;
    var inpVal4=document.querySelector('.inpVal4').value;
    var inpVal5=document.querySelector('.inpVal5').value;
    var inpVal6=document.querySelector('.inpVal6').value;
    var val=inpVal1+""+inpVal2+""+inpVal3+""+inpVal4+""+inpVal5+""+inpVal6;
    showNum.innerHTML="您输入的是----"+val;
    console.log(val);
};
var active = 0,
        inputBtn = document.querySelectorAll('input');
for (var i = 0; i < inputBtn.length; i++) {
    inputBtn[i].addEventListener('click', function () {
        inputBtn[active].focus();
    }, false);
    inputBtn[i].addEventListener('focus', function () {
        this.addEventListener('keyup', listenKeyUp, false);
    }, false);
    inputBtn[i].addEventListener('blur', function () {
        this.removeEventListener('keyup', listenKeyUp, false);
    }, false);
}
/*监听键盘的敲击事件*/
function listenKeyUp() {
    if (!isNaN(this.value) && this.value.length != 0) {
        if (active < 5) {
            active += 1;
        }
        inputBtn[active].focus();
    } else if (this.value.length == 0) {
        if (active > 0) {
            active -= 1;
        }
        inputBtn[active].focus();
    }
}
})(window, document);