移动端四格验证码功能实现

话不多说，先上图：

image.png

相信很多小伙伴写过或者是用到过这种四格或者是6格的验证码页面，很多做移动端的公司也都会选择这种便捷的输入方式，通常来说，使用这种方式也是为了便捷的提交验证码，即输入完成之后即时提交，相信很多小伙伴在开始写的时候，第一想法是做4个input，我之前也试过4个input，但实现起来太麻烦，我的思路是四个div，一个input隐藏起来，具体看下面开始代码的展示

下面是HTML代码的展示,只展示验证码部分的

<div class="container" id="test">
  <div class="val-box" id="val-box">
      <input type="text" id="val-code-input" maxlength="4" onkeyup="checkForNum(this)" onselectstart="return false;" onblur="checkForNum(this)">
      <div name="val-item"></div>
      <div name="val-item"></div>
      <div name="val-item"></div>
      <div name="val-item"></div>
  </div>
</div>

下面是css代码的展示

        .container{
            width: 84%;
            /* height: 150pt; */
            margin: 0 auto;
        }
        .val-box{
            display: flex;
            /* height: 100%;
            width: 100%; */
            text-align: center;
            position: relative;
            background: rgba(255,255,255,0);
            justify-content: space-around;
        }
        .val-box input[type=text]{
            position: absolute;
            left:0;
            top:0;
            height:34px;
            width: 212px;
            z-index: -999;
            outline: none;
            -webkit-tap-highlight-color: transparent;
            background-color: rgba(255,255,255,0);
        }
        .val-box div{
            /* height: 100%;
            width: 20%; */
            width: 34pt;
            height: 30pt;
            border:1px solid #999999;
            border-radius: 5px;
            float: left;
            margin: 2px 2.5%;
            z-index: 5;
            font-size: 1.5em;
            font-family: arial;
            text-align: center;
            line-height: 1.5em;
            cursor:text;
            background-color: rgba(255,255,255,0);
        }
        .val-box .available{
            border-color:#0081db;
        }

部分宽高属性请自行编写，接下来是js的展示：

    var valCodeInput = $("#val-code-input");
    var valCodeItems = $("div[name='val-item']");
    var regex = /^[\d]+$/;
    var valCodeLength = 0;
    $('#val-box').on('click',function(){
        console.log("聚焦")
        valCodeInput.focus();
        
    })
    
    // input输入框即时反映
    valCodeInput.on('input propertychange change', function(e){
        valCodeLength = valCodeInput.val().length;
        if(valCodeInput.val() && regex.test(valCodeInput.val())) {
            $(valCodeItems[valCodeLength - 1]).removeClass('available');
            $(valCodeItems[valCodeLength - 1]).addClass('available');
            $(valCodeItems[valCodeLength - 1]).text(valCodeInput.val().substring(valCodeLength - 1, valCodeLength));
        }
    })
    // 点击获取验证码或点击第一个数字输入框时获取焦点,添加available类样式
    $("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');
            }
        }
    });
    // 当验证码输入四位时直接跳转（在此验证验证码是否正确
    $(valCodeInput).on("input propertychange",function(){
        if (valCodeInput.val().length == 4) {
//          $("#yanzhengma").fadeOut(200,function(){
//              $("#dialog1").fadeIn(200);
//          })
            console.log('123')
        }
    })
    
    //把所有输入的不是数字的字符转换为空值
    function checkForNum(obj) {
       obj.value = obj.value.replace(/[\D]/g, '');
    }

是不是很简单，喜欢的记得转载收藏加关注哦亲亲，点关注不迷路！！

qinqin.gif