數字驗證碼多個輸入框實現一個輸入框效果

html核心代碼如下：

<p class="iptCodeTip">請輸入短信中的6位驗證碼</p>
    <div class="checkedCode">
        <%--<input type="text" maxlength="6" id="iptCode">--%>
        <div class="getCodeMsg">
            <input type="tel" maxlength="1" name="code" pattern="[0-9]*" />
            <input type="tel" maxlength="1" name="code" pattern="[0-9]*"/>
            <input type="tel" maxlength="1" name="code" pattern="[0-9]*"/>
            <input type="tel" maxlength="1" name="code" pattern="[0-9]*"/>
            <input type="tel" maxlength="1" name="code" pattern="[0-9]*"/>
            <input type="tel" maxlength="1" name="code" pattern="[0-9]*"/>
        </div>
        <a id="sendMsgRepet">重新發送</a>
        <a id="countLast" style="display: none"><label>60</label>秒后重新發送</a>
    </div>

 對應的css如下：

.iptCodeTip{color: #000;font-size: 14px;line-height: 40px;text-align: center}
.checkedCode{padding: 0 48px;overflow: hidden}
.checkedCode a{float: right;font-size: 13px;color: #000000;text-decoration: underline;line-height: 13px}
.checkedCode input{padding: 0;margin:10px 0;width:12%;margin-right: 5.6%;text-align: center;display: block;float: left;height: 35px;border: solid 1px #898989;border-radius: 0;}
.checkedCode input:last-child{margin-right: 0}

 核心js如下：

$('.getCodeMsg input').keyup(function (event) {
        // 刪除往前 添加往后
        if($(this).index()<6) {
            if(event.keyCode==46 || event.keyCode==8) {
                $(this).prev('input').focus();
            }else {
                $(this).next('input').focus();
            }
        }
    })

 顯示效果圖如下：