（2）移动端验证码效果

原地址：https://blog.csdn.net/qq_40001322/article/details/81448429

<!-- 验证码输入框 -->
HTML：
            <div class="container" id="test">
                <div class="val-box" id="val-box">
                    <input id="val-code-input" type="number" maxlength="4" onselectstart="return false;" onkeyup="this.value=this.value.replace(/[\D]/g, '')" onblur="this.value=this.value.replace(/[\D]/g, '')" oninput="if(value.length>4) value=value.slice(0,4)"/>
                    <p class="codeNews">输入短信验证码</p>
                    <div name="val-item" id="code_one"></div>
                    <div name="val-item" id="code_two"></div>
                    <div name="val-item" id="code_three"></div>
                    <div name="val-item" id="code_four"></div>
                </div>
            </div>

js：
$(function(){
   var valCodeInput = $("#val-code-input");
   var valCodeItems = $("div[name='val-item']");
   var regex = /^[\d]+$/;
   var valCodeLength = 0;
   $('#val-box').on('click',function(){
   valCodeInput.focus();
  });
  valCodeInput.on('input propertychange change', function(e){
     valCodeLength = valCodeInput.val().length;
     if(valCodeInput.val() && regex.test(valCodeInput.val())) {
         $('.codeNews').hide();
         $('#code_login').removeClass('next-btn');
         $(valCodeItems[valCodeLength - 1]).removeClass('available');
         $(valCodeItems[valCodeLength - 1]).addClass('available');
         $(valCodeItems[valCodeLength]).removeClass('available');
         $(valCodeItems[valCodeLength]).addClass('available');
         $(valCodeItems[valCodeLength - 1]).text(valCodeInput.val().substring(valCodeLength - 1, valCodeLength));
     }else{
        $('.codeNews').show();
        $('#code_login').addClass('next-btn');
     }
  })
  $("#code_get,#next,div[name='val-item']").on("tap",function(){
     $(valCodeInput).focus();
     $(valCodeItems[0]).addClass('available');
  })
  $(this).on('keyup', function(e){
     if(e.keyCode === 8) {
         $(valCodeItems[valCodeLength]).text("");
         if(valCodeLength !== 0){
             $(valCodeItems[valCodeLength]).removeClass('available');
             $(valCodeItems[valCodeLength+1]).removeClass('available');
         }
     }
  });
  $(valCodeInput).on("input propertychange",function(){
     if (valCodeInput.val().length == 4) {
        $(valCodeItems[0]).text(valCodeInput.val().substring(0,1));
        $(valCodeItems[1]).text(valCodeInput.val().substring(1,2));
        $(valCodeItems[2]).text(valCodeInput.val().substring(2,3));
        $(valCodeItems[3]).text(valCodeInput.val().substring(3,4));
        $(valCodeItems[1]).addClass('available');
        $(valCodeItems[2]).addClass('available');
        // $("#yanzhengma").fadeOut(200,function(){
        // $("#dialog1").fadeIn(200);
        //})
     }
  })     
})

css：
.codeNews{
  font-size: .4rem !important;
  position: absolute;
  left:0;
  top: -0.3rem;
  background-color: rgba(255, 255, 255, 0);
}
.container{
  position: absolute;
  top:5.6rem;
  text-align: center;
  }
  .container p{
  font-family: '微软雅黑';
  color: #888;
  }
  .val-box {
  display: inline-block;
  height: 0.9rem;
  width: 8.6rem;
  text-align: center;
  position: relative;
  background: #FFFFFF;
  -webkit-tap-highlight-color: transparent;
  }

  .val-box input[type=number] {
  position: absolute;
  left: 0;
  top: 0;
  height: 34px;
  width: 212px;
  opacity: 0.9;
  z-index: -999;
  outline: none;
  margin-left: -250px;
  -webkit-tap-highlight-color: transparent;
  }
  .val-box p{
    color: rgb(204, 204, 204);
    position: absolute;
    padding: .39rem .27rem 0.1rem 0.27rem;
  }
  .val-box div {
  height: 39px;
  width: 22%;
  border-bottom: 1px solid #DDD;
  float: left;
  margin: 2px 3px;
  z-index: 5;
  font-size: 1.5em;
  font-family: arial;
  /*font-weight: 530;*/
  text-align: center;
  line-height: 1.5em;
  cursor: text;
  /*padding-bottom: 10px;*/
  }
  .val-box .available {
    border-bottom-color: #0081db;
  }

.val-box .availabla:after {
 /*伪类实现光标效果*/
 content: '';
display: inline-block;
height: 90%;
width: 1px;
background: #313131;
animation: .8s animate infinite;
}