話不多說，先上圖：

image.png

相信很多小伙伴寫過或者是用到過這種四格或者是6格的驗(yàn)證碼頁面，很多做移動(dòng)端的公司也都會(huì)選擇這種便捷的輸入方式，通常來說，使用這種方式也是為了便捷的提交驗(yàn)證碼，即輸入完成之后即時(shí)提交，相信很多小伙伴在開始寫的時(shí)候，第一想法是做4個(gè)input，我之前也試過4個(gè)input，但實(shí)現(xiàn)起來太麻煩，我的思路是四個(gè)div，一個(gè)input隱藏起來，具體看下面開始代碼的展示

下面是HTML代碼的展示,只展示驗(yàn)證碼部分的

<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;
        }

部分寬高屬性請(qǐng)自行編寫，接下來是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輸入框即時(shí)反映
    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));
        }
    })
    // 點(diǎn)擊獲取驗(yàn)證碼或點(diǎn)擊第一個(gè)數(shù)字輸入框時(shí)獲取焦點(diǎn),添加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');
            }
        }
    });
    // 當(dāng)驗(yàn)證碼輸入四位時(shí)直接跳轉(zhuǎn)（在此驗(yàn)證驗(yàn)證碼是否正確
    $(valCodeInput).on("input propertychange",function(){
        if (valCodeInput.val().length == 4) {
//          $("#yanzhengma").fadeOut(200,function(){
//              $("#dialog1").fadeIn(200);
//          })
            console.log('123')
        }
    })
    
    //把所有輸入的不是數(shù)字的字符轉(zhuǎn)換為空值
    function checkForNum(obj) {
       obj.value = obj.value.replace(/[\D]/g, '');
    }

是不是很簡單，喜歡的記得轉(zhuǎn)載收藏加關(guān)注哦親親，點(diǎn)關(guān)注不迷路！！

qinqin.gif