仿支付宝多框输入js

查看演示 下载资源 下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

<-这里是结构代码->
 <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>

.input {
            display: inline-block;
        }
        input:last-child {
             border-right: 1px solid #999;
         }
        input {
            border-top: 1px solid #999;
            border-bottom: 1px solid #999;
            border-left: 1px solid #999;
            border-right: 1px solid #999;
            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);
        }
        .showNum{
            width: 300px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border: 1px solid #cccccc;
            cursor: pointer;
        }

/*模拟支付宝的密码输入形式*/
    (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);