手機端實現6位短信驗證碼input輸入框效果（樣式及代碼方法）

微信移動端4位、6位、多位驗證碼密碼輸入框功能的實現代碼，實現思路：

方案1：

寫一個簡單的input框。html

評估：樣式很差看，待定。ios

方案2：

就是用6個input框，每輸入一個數字以後，切換到下一個input，即切換focus，刪除的時候，同理。自測發現安卓機很流暢，但ios微信端並非那麼流暢，ios默認輸入法輸入也有點瑕疵。web

評估：感嘆一下萬能的安卓，吐槽下wechat裏ios版本更新慢，該方案可能要pass。chrome

方案3：

用6個span標籤。即放置一個輸入框，隱藏其文字和位置，label>span*6。瀏覽器

評估：解決了絕大多數問題，不少公司都是相似的方案。微信

最終結果：
因爲工程緊迫項目小，還考慮到一些其餘外部緣由，咱們美麗的產品大人拍板了第一種方案。雖然說兜兜轉轉又回到了圓點，可是大人給個人啓發實實不可忽略。app

下面是我開Vue工程，打的demo：

demo

下面是Vue工程demo代碼：

Vue組件代碼：template內容：

<template>
  <div class="input-captcha-20190115">
    <h3>栗子1：簡單的input框</h3>
    <div class="input-box">
      <input v-model.trim="simpleInput0" type="number" placeholder="請輸入六位數字驗證碼">
    </div>
    <br>
    <br>
    <h3>栗子2：由六個span代替輸入框</h3>
    <div class="input-box">
      <div class="tips">用六個span代替輸入框：</div>
      <label class="simple-input-content" for="simpleInput1">
        <span class="highlight">{{simpleInput1.slice(0,1)}}</span>
        <span :class="simpleInput1.length > 1?'highlight':''">{{simpleInput1.slice(1,2)}}</span>
        <span :class="simpleInput1.length > 2?'highlight':''">{{simpleInput1.slice(2,3)}}</span>
        <span :class="simpleInput1.length > 3?'highlight':''">{{simpleInput1.slice(3,4)}}</span>
        <span :class="simpleInput1.length > 4?'highlight':''">{{simpleInput1.slice(4,5)}}</span>
        <span :class="simpleInput1.length > 5?'highlight':''">{{simpleInput1.slice(5,6)}}</span>
      </label>
      <div class="tips">要隱藏的輸入框：</div>
      <input id="simpleInput1" v-model.trim="simpleInput1" type="number" placeholder="請輸入六位數字驗證碼">
    </div>
    <br>
    <br>
    <h3>栗子3：由六個input組成</h3>
    <div class="input-box">
      <div class="input-content">
        <input v-model.trim.number="input0" ref="input0" @keydown.8="deleteValue('input0','input0')" @keyup="changeValue($event,'input0','input1')" type="number" placeholder="空">
        <input v-model.trim.number="input1" ref="input1" @keydown.8="deleteValue('input1','input0')" @keyup="changeValue($event,'input1','input2')" type="number" placeholder="空">
        <input v-model.trim.number="input2" ref="input2" @keydown.8="deleteValue('input2','input1')" @keyup="changeValue($event,'input2','input3')" type="number" placeholder="空">
        <input v-model.trim.number="input3" ref="input3" @keydown.8="deleteValue('input3','input2')" @keyup="changeValue($event,'input3','input4')" type="number" placeholder="空">
        <input v-model.trim.number="input4" ref="input4" @keydown.8="deleteValue('input4','input3')" @keyup="changeValue($event,'input4','input5')" type="number" placeholder="空">
        <input v-model.trim.number="input5" ref="input5" @keydown.8="deleteValue('input5','input4')" @keyup="changeValue($event,'input5','input5')" type="number" placeholder="空">
      </div>
    </div>
  </div>
</template>

View Template Code

Vue組件代碼：script內容：

<script> export default { name: 'inputCaptcha', data () { return { simpleInput0: '', simpleInput1: '', input0: '', input1: '', input2: '', input3: '', input4: '', input5: '' } }, methods: { deleteValue (inputValue, previousItem) { // 鍵盤按下時$event，當前input，上一個input
      console.log(this[inputValue], this[previousItem]) if (this[inputValue].length > 0) { // 當前有值，清空之
        this[inputValue] = '' } else { // 當前沒有值，光標跳轉到上一個input，並清空該input值
        this.$nextTick(() => { this.$refs[previousItem].focus() this[previousItem] = ''
          this[inputValue] = '' }) } }, changeValue (e, inputValue, nextItem) { // 鍵盤擡起時$event，當前input，下一個input
      console.log(e.keyCode, this[inputValue], this[nextItem]) if (e.keyCode !== 8) { this.$nextTick(() => { this.$refs[nextItem].focus() // 截取當前值最後一位，跳到下一個input
          this[inputValue] = (this[inputValue]).toString().slice(-1) }) } } } } </script>

View JavaScript Code

Vue組件代碼：style[lang=less]內容：

<!-- Add "scoped" attribute to limit CSS to this component only --> <style lang="less"> .input-captcha-20190115 { min-height: 200px; .input-box { min-height: 100px; box-shadow: 0 0 5px 1px black; border-radius: 8px; width: 100%; max-width: 500px; display: inline-block; padding: 20px; box-sizing: border-box; input { vertical-align: middle;
    } & + .input-box { margin-top: 20px;
    } // 六個span時的樣式 .simple-input-content { label { padding: 20px;
      } span { vertical-align: middle; border: 1px solid silver; display: inline-block; height: 20px; width: 20px; &.highlight { border-color: purple;
        } } } // 六個input時的樣式 .input-content { padding: 20px; input { width: 20px; height: 20px; text-align: center;
      } } /* 去掉input[type=number]瀏覽器默認的icon顯示 */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { // chrome -webkit-appearance: none; appearance: none; margin: 0;
    } input{ // 火狐 -moz-appearance:textfield;
    } } } </style>

View Style Code

Vue掛載標籤<div id="app20190115"></div>樣式：less

<style> #app20190115 { text-align: center; color: #2c3e50; border: 1px solid silver;
} .tips { color: #666 } </style>

Vue工程demo中的知識點：

1.在Chrome與火狐中，輸入框input類型爲number時，如何去除掉的自帶的上下默認箭頭ide

2.鍵盤按鈕keyCode大全：獲取按鍵對應的鍵值的方法this