最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

仿支付宝多框输入js

来源:http://www.erdangjiade.com/ 沐浴春风 2016-10-23 22:10浏览(1662)

监听键盘的敲击事件,一共六个input框,当第一个输入完毕,下一个框自动获取光标,继续输入..

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

仿支付宝多框输入js
分类:其它特效 > 联动效果 难易:初级
查看演示

加我微信,拉你进VIP群学习:

下载资源 下载积分: 30 积分
<-这里是结构代码->
 <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);
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/982.html
评论3
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

  • 头像 板凳
    04-22 17:23
    Apollo
    很炫酷嘛
  • 头像 椅子
    05-24 12:08
    zou6256111
    积分不够!!好贵呀
  • 头像 沙发
    02-17 10:33
    a1015703929
    这个可以的
1 2