手机端实现6位验证码输入框效果

也就是 界面上，6个input框

当初想着应该很简单的，结果做起来发现，还是坑蛮多的

首先的想法就是6个input框，每输入一个数字之后，切换到下一个input，即切换focus，昨晚发现安卓机很流畅啊，但是要命的是ios并不是那么流畅，有卡顿的感觉，输很快会导致感觉手机要卡死的感觉，当然要pass，

其次，我是不是可以一个input框，分成6个格子的样式呢，计算数字宽度，发现样太不友好了，也就pass掉，

最后想到一种方法，我在最外面套一个真实的input框，里面再套6个小input框，但是这样，光标问题很严重，

ios上无法看，搜了一圈，发现可以利用样式来隐藏光标，最后贴一下关键代码

这是html代码

   <group class="write-input">
          <input ref="input" type="number" maxlength="6"
                 class="realInput" v-model="photoNum"
                 @keyup="getNum()" @keydown="delNum()">
          <li v-for="(disInput, index) of disInputs"
              :class="{'input-active': photoNum.length === index || photoNum.length > index || index === 0}">
            <input maxlength="1" disabled v-model="disInput.value">
          </li>
          <div class="invite__tip" v-if="showTip">{{tipContent}}</div>
        </group>

绑定的class，是客户需要那种我知道是输对应哪个input框的效果，让其外圈变红

输入与删除，利用keyCode

    delNum () {    // 删除
        let oEvent = window.event
        if (oEvent.keyCode === 8) {
          if (this.photoNum.length > 0) {
            this.disInputs[this.photoNum.length - 1].value = ''
          }
        }
      },
      getNum () {   // 输入
        for (var i = 0; i < this.photoNum.length; i++) {
          this.disInputs[i].value = this.photoNum.charAt(i)
        }
      }

主要css

.write-input {
      position: relative;
      display: flex;
      .vux-no-group-title {
        padding-bottom: 1rem;
      }
      li {
        display: inline-block;
        width: 1.75rem;
        height: 1.85rem;
        border: .04rem solid #E7E7E7;
        border-radius: .25rem;
        list-style-type: none;
        line-height: 1 !important;
        min-height: 1.85rem !important;
        margin: 0 .11rem;
        input {
          -webkit-appearance: none;
          -moz-appearance: none;
          -ms-appearance: none;
          resize: none;
          outline: none;
          border: 0;
          padding: .5rem 0;
          width: 1.67rem;
          border-radius: .25rem;
          text-align: center;
          font-size: 16px;
          background: none !important;
        }
      }
      .realInput {
        -webkit-appearance: none;
        -moz-appearance: none;
        -ms-appearance: none;
        resize: none;
        outline: none;
        border: 0;
        z-index: 50;
        position: absolute;
        padding: .61rem 0;
        background: none;
        display: block;
        margin-left: -30%;
        top: 34px;
        opacity: 0;
        caret-color: #fff;
        color: #000;
        text-indent: -5rem;
        font-size: .63rem;
        width: 150%;
        top: 1px;
      }
    }

 

效果图：放一个动图吧，嘿嘿嘿