今天看到一個帖子，說到用input輸入框模擬滴滴、摩拜等app驗證碼輸入效果，提到了一個方案：

1、利用input來獲得焦點，自動呼叫手機的數字鍵盤

2、實際將輸入框用透明度隱藏

3、用label的for屬性與input聯動來顯示輸入的數字

於是照著這個思路實際操作了一番，還是發現了不少問題。

首先頁面佈局：

<div class="container">
    <h2>輸入驗證碼：</h2>
    <div class="vcode" id='vertifycode'>
        <input type="tel" maxlength='6' ref='code' class='code' id='code'>
        <div class="labels">
            <label class='label' for="code"></label>
            <label class='label' for="code"></label>
            <label class='label' for="code"></label>
            <label class='label' for="code"></label>
            <label class='label' for="code"></label>
            <label class='label' for="code"></label>
        </div>
    </div>
</div>
 

樣式：

@keyframes animate {
            100% {
                opacity: 0;
            }
        }
        .container{
            padding: 5%;
        }
        .vcode{
            position: relative;
            width: 100%;
            overflow: hidden;
        }
        .code{
            width: 100%;
            padding: 0;
            height: 40px;
            font-size: 35px;
            overflow: hidden;
            border: none;
            outline: none;
            opacity: 0;
            margin-left: -100%; // ios上透明度為0時依然有游標
            -webkit-tap-highlight-color: transparent;
        }
        .labels{
            display: flex;
            display: -webkit-flex;
            width: 100%;
            height: 40px;
            justify-content: space-between;
            -webkit-justify-content: space-between;
            margin-top: -40px;
            -webkit-tap-highlight-color: transparent;// 解決ios點選灰色陰影的問題
        }
        .label{
            height: 34px;
            width: 12%;
            border-bottom: solid 2px #313131;
            float: left;
            color: #313131;
            font-size: 35px;
            text-align: center;
            padding-bottom: 4px;
        }
        .active:after{ // 偽類實現游標效果
            content: ' ';
            display: inline-block;
            height: 100%;
            width: 2px;
            background: #313131;
            animation: .8s animate infinite;
        }
 

注意點：

1、ios手機上input和lable都會出現點選有灰色背景閃動的問題，所以一定要給樣式加上

-webkit-tap-highlight-color: transparent;

2、輸入框的預設游標隱藏了後，用偽類實現游標效果：

.active:after{ // 偽類實現游標效果
            content: ' ';
            display: inline-block;
            height: 100%;
            width: 2px;
            background: #313131;
            animation: .8s animate infinite;
        }
 

3、ios上雖然input透明度已經設定為0了，但是當其獲得焦點時，預設的游標依然存在

可以利用margin將整個input輸入框隱藏來解決：

margin-left: -100%; 

樣式寫好了，就改進行邏輯處理了：

引入vue.js（vue確實好用）

<script src='./js/vue.min.js'></script>

更改頁面佈局：

<div class="container">
    <h2>輸入驗證碼：</h2>
    <div class="vcode" id='vertifycode'>
        <input type="tel" maxlength='6' ref='code' class='code' id='code'
               @focus='focus=true'
               v-model='code'
               @blur='focus=false'
               :disabled='disabled'
        >
        <div class="labels">
            <label class='label' for="code"
                   :class='{active: focus===true && index===currentIndex}'
                   v-for='item,index in length'
                    v-text='arrCode[index]'>
            </label>
        </div>
    </div>
</div>

邏輯程式碼：

new Vue({
        el: '#vertifycode',
        data: {
            length: 6,
            currentIndex: 0,
            code: '',
            focus: false,
            arrCode: [],
            disabled: false
        },
        computed: {
            arrCode: function () {
                return this.code.split('');
            },
            currentIndex: function () {
                return this.code.length;
            }
        },
        watch: {
            code: function (newV,oldV) {
                var self = this;
                this.code = newV.replace(/[^\d]/g,''); // 限制非數字
                console.log(newV);
                if(newV.length >= 6) {
                    this.disabled = true;
                    this.$refs.code.blur();
                    setTimeout(function () {
                        alert('submit:'+self.code+'');
                    },500);
                }
            }
        }

資料說明：

length： 密碼長度，根據實際需求設定；

currentIndex: 當前獲得焦點的label的索引；

code: 輸入的內容；

focus： 判斷輸入框的焦點狀況；

arrCode：用於填充label標籤內容；

disabled：控制輸入框是否可用，輸入6位驗證碼後禁用。

當輸入長度等於6時，輸入框失去焦點，自動提交資料，彈出提示框，實際效果：