zoukankan      html  css  js  c++  java
  • 移动端密码框输入,判断密码输入是否正确

    <div class="info">
        <p class="title">添加银行卡</p>
        <p class="remark">请输入支付密码,以验证身份</p>
        <div class="ipts">
           <input type="tel" class="real-ipt">
           <div class="passIpts">
               <input type="password" class="pIpts">
               <input type="password" class="pIpts">
               <input type="password" class="pIpts">
               <input type="password" class="pIpts">
               <input type="password" class="pIpts">
               <input type="password" class="pIpts">
            </div>
         </div>
    </div>
    

     (HTML内容)

    .info{
        padding-top:2.6667rem;
    }
    .info .title{
         padding-bottom:0.6667rem;
         /*30px*/
         line-height:0.8rem;
         /*20px*/
         font-size:0.5867rem;
         text-align: center;
    }
    .info .remark{
         /*60px*/
         padding-bottom:1.6rem;
         line-height:0.5333rem;
         text-align: center;
    }
    .info .ipts{
          margin:0 auto;
          position:relative;
          /*120px*/
          5.9467rem;
          height:1.0133rem;
          border:1px solid #ddd;
    }
    .info .ipts>input{
          position:absolute;
          top:0;
          left:0;
          100%;
          height:1.0133rem;
          z-index:1;
          opacity: 0;
    }
    .info .passIpts{
          overflow: hidden;
    }
    .info .passIpts input{
          16.667%;
          height:1.0133rem;
          line-height:1.0133rem;
          text-align:center;
          float:left;
          border-right:1px solid #ddd;
    }
    

      (CSS内容)

        var $input = $(".passIpts input");
        $(".real-ipt").on("input",function(){
            $(this).val($(this).val().replace(/s/g,""));
            var pwd = $(this).val();
            // console.log($(this).val());
            for (var i = 0, len = $(this).val().length; i < len; i++) {
                $input.eq("" + i + "").val(pwd[i]);
            }
            $input.each(function() {
                var index = $(this).index();
                if (index >= len) {
                    $(this).val("");
                    // console.log(index);
                }
            });
            if($(this).val().length == 6 ){
                window.location.href='addCard.html';
            }
        })
    

      (JS内容)

  • 相关阅读:
    VMware Workstation Pro下载密钥
    hypervisor
    Xmanager6 下载地址
    linux常用命令
    linux常用
    查看机器端口信息
    windows下快捷键
    SpringMVC学习笔记整理
    2017面试题收集
    oracle 常用知识点整理
  • 原文地址:https://www.cnblogs.com/dyy-dida/p/10510494.html
Copyright © 2011-2022 走看看