手機驗證碼自動跳轉下一個輸入框之功能

zhengyeye發表於2018-11-28

優化使用者體驗度，請看下面的效果：

業務場景描述：

輸入第一個驗證碼後，自動跳轉至後面的輸入框中，並且在最後一個輸入框輸完之後，進行資料校驗。

主要程式碼：

<!-- 六個驗證碼輸入框 -->
<div class="codeinput">
  <input type="tel" maxlength="1" id="tel1"/>
  <input type="tel" maxlength="1"/>
  <input type="tel" maxlength="1"/>
  <input type="tel" maxlength="1"/>
  <input type="tel" maxlength="1"/>
  <input type="tel" maxlength="1" id="tel6"/>
</div>
/* 驗證碼框樣式 */
.codeinput {
    margin:0 auto;
    text-align: center; width: 87.5%; background: #000
}

.codeinput input[type=tel] {
    width: 42px;
    height:42px;
    text-align: center; border:1px solid #dad6da; border-radius: 3px; float: left; margin-left: 1%; font-size: 15px; box-sizing: border-box;
}
/* input 獲取焦點邊框顏色 */
   
.codeinput input[type=tel]:focus{
    outline:none;
    border:1px solid #5ec2d2;
} 
  // 每個輸入框只能輸入一位 輸入完成自動聚焦下一輸入框
    // 當輸入長度等於6時，輸入框失去焦點，自動提交資料，彈出提示框
    $('#tel1').focus(function(){
        //第一個input框獲得焦點時觸發的事件
        var txts = $(".codeinput input");
        for (var i = 0; i < txts.length; i++) {
            var t = txts[i];
            t.index = i;
            t.setAttribute("readonly", true);
            t.onkeyup = function() {
                this.value = this.value.replace(/^(.).*$/, '$1');
                var next = this.index + 1;
                if (next > txts.length - 1) return;
                txts[next].removeAttribute("readonly");
                if (this.value) {
                    txts[next].focus();
                }
            }
        }
        txts[0].removeAttribute("readonly");
    });
    // 第6個input框鍵盤彈起事件監聽
    $('#tel6').keyup(function(){
        var mobile=$('#mobile').val();//手機號
        var codestr='';//驗證碼
        var txts = $(".codeinput input");
        for (var i = 0; i < txts.length; i++) {
            codestr+=txts[i].value;
        }
        if(!mobile){
            layer.msg('手機號不能為空！');
            return false;
        }
        if(!/^([1-9])\d{10}$/.test(mobile)){
            layer.msg('請輸入正確的手機號！');
            return;
        }
        var codestr='';//驗證碼
        var txts = $(".codeinput input");
        for (var i = 0; i < txts.length; i++) {
            codestr+=txts[i].value;
        }
        if(!codestr){
            layer.msg('驗證碼不能為空！');
            return;
        }
        if(codestr.length !=6){
            layer.msg('請輸入完整6位驗證碼！');
            return;
        }
        if(!isphonecode){
            layer.msg('驗證碼不存在！');
            return;
        }
        //TODO:後續請求介面業務邏輯
    });

這樣基本就會實現開篇的效果；但是後來又因為使用者不完美的體驗，新增可以回退刪除事件。後來參考支付寶輸入密碼的刪除事件：將只要使用者去點選刪除事件，就將輸入的所有字元清空，然後從第一個重新開始書寫。於是：

$(".codeinput").keydown(function(event){
        if(event.keyCode==8){
            $('.codeinput input[type=tel]').val("");
            $('#tel1').focus();
        }
    });

其中：

event.keyCode==8

則為監聽手機上的回退按鈕事件。

 

相關文章