Jquery实现六位数验证码

前端时间公司要求维护老项目，并新增验证码需求，所有有空总结了一下；先上一下效果图

HTML内容

<div class="verification-code">
     <input type="number" maxlength="6" autofocus class='code' id='code'>
     <div class="labels">
         <label class='label' for="code"></label>
         <label class='label' for="code"></label>
         <label class='label' for="code"></label>
         <label class='label' for="code"></label>
         <label class='label' for="code"></label>
         <label class='label' for="code"></label>
     </div>
 </div>

JQ代码实现部分

jQuery(document).on('ready', function () {
  let second = 60
   let i = 0;
   let passwordStr = ''
   let timer = null

   // 验证码输入获取焦点
   $("#code").focus(function(){
     if (i === 6) {
       $("label:nth-child(6)").addClass("active");
     } else if (passwordStr.length) {
       i = passwordStr.length
       $(".labels label").removeClass("active");
       $("label:nth-child("+(i+1)+")").addClass("active")
     } else {
       i = 0
       $(".labels label").removeClass("active");
       $("label:nth-child(1)").addClass("active")
     }
   })
   
   $('.verification-code input').bind('keyup', function (event) {
   	 // 针对部分安卓手机返回229做处理
     event.key =
       event.key === 'Unidentified'
         ? event.target.value.charAt(event.target.value.length - 1)
         : event.key
     const reg = /[A-Za-z0-9]/;
     if(reg.test(event.key)){
       $(".labels label").removeClass("active");
       if(i < $(".labels label").length) {
         //46删除键，8回退键
         if(event.keyCode == 46 || event.keyCode == 8) {
           i--;
           i = i < 0 ? 0 : i;
           $("label:nth-child("+(i+1)+")").html("").addClass("active")
           passwordStr = passwordStr.slice(0, i)
         } else {
           const reg1 = /[0-9]/;
           if (reg1.test(event.key)) {
             passwordStr += event.key
             $("label:nth-child("+(i+1)+")").html(event.key)
             $("label:nth-child("+(i+2)+")").addClass("active")
             i++;
           } else {
             $("label:nth-child("+(i+1)+")").addClass("active")
           }
         }
       } else {
         if(event.keyCode == 46 || event.keyCode == 8) {
           i = $(".labels label").length - 1;
           $("label:nth-child("+(i+1)+")").html("").addClass("active")
           passwordStr = passwordStr.slice(0, i - 1)
         } else {
           $("label:nth-child(6)").addClass("active")
         }
       }
     }
   })
 })

css部分

.verification-code {
    position: relative;
    width: 100%;
    overflow: hidden;
    .code{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      padding: 0;
      height: 80px;
      font-size: 35px;
      overflow: hidden;
      border: none;
      outline: none;
      opacity: 0;
      user-select: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none; 
      -webkit-tap-highlight-color: transparent;/*ios手机上input和lable都会出现点击有灰色背景闪动*/
    }

    .labels{
      display: flex;
      display: -webkit-flex;
      width: 100%;
      height: 40px;
      justify-content: space-between;
      -webkit-justify-content: space-between;
      margin-bottom: 40px;
      -webkit-tap-highlight-color: transparent; /*防止ios手机上input和lable都会出现点击有灰色背景闪动*/
    }

    .label{
      display: flex;
      justify-content: center;
      height: 34px;
      line-height:34px;
      width: 12%;
      border-bottom: 1px solid #E0E0E0;
      color: #010101;
      font-size: 24px;
      text-align: center;
      padding-bottom: 4px;
    }

    .active:after{
      content: '';
      display: inline-block;
      height: 100%;
      width: 2px;
      height:34px;
      background: #210F60;
      animation: .8s animate linear infinite;
    }
  }
@keyframes animate {
  100% {
    opacity: 0;
  }
}