自动跳格的验证码输入

        最近做小程序，其中有一个短信验证码的填写页面，是那种输入数字，就自动跳到下一格的，可以看下动图

演示

        点击横线区域，弹出键盘，然后依次输入数字，可自动跳到下一格，输入完成后，下方确定按钮自动变为可点击。

思路：

        这个一开始我是以为用 input 做好数字之间间隔，然后样式再做好数字的对准即可，这样子也可以随意修改某个数字。后来做了之后，发现这样子并不好操作，尤其是在样式方面的控制，所以这种方法的做了一下就被我删了重做了。

        那么另外的做法就剩下使用每个标签来装数字，每个标签装一个数字这种方法了，这种方法在样式上控制起来就容易多了。我目前项目的验证码是6位数的，所以，需要有六个标签来展示输入，因为要能够输入数字，所以需要有 input 标签来存数字，然后每个标签的数字就通过像取数组一样，取到字符串内的每一个数字。有这种思路接下来就很容易把这个验证码输入的给做出来了。

        上代码，直接复制到微信开发者工具上面可以直接预览效果

wxml 

<view class="modify_password">
  <view class="tips"> 
    <view>验证当前手机号{{ currentMobile }}</view>
    <view>为了您的帐号安全，请输入验证码</view>
  </view>
  <view class="code_area">
    <view class="input_area">
      <view bindtap="onFocus" id="0" class="{{ idx === 0 ? 'active' : '' }} {{code[0] ? 'hasValue' : ''}}">{{ code[0] }}</view>
      <view bindtap="onFocus" id="1" class="{{ idx === 1 ? 'active' : '' }} {{code[1] ? 'hasValue' : ''}}">{{ code[1] }}</view>
      <view bindtap="onFocus" id="2" class="{{ idx === 2 ? 'active' : '' }} {{code[2] ? 'hasValue' : ''}}">{{ code[2] }}</view>
      <view bindtap="onFocus" id="3" class="{{ idx === 3 ? 'active' : '' }} {{code[3] ? 'hasValue' : ''}}">{{ code[3] }}</view>
      <view bindtap="onFocus" id="4" class="{{ idx === 4 ? 'active' : '' }} {{code[4] ? 'hasValue' : ''}}">{{ code[4] }}</view>
      <view bindtap="onFocus" id="5" class="{{ idx === 5 ? 'active' : '' }} {{code[5] ? 'hasValue' : ''}}">{{ code[5] }}</view>
      <input class="hidden_input" type="number" bindinput="handleInput" maxlength="6" focus="{{ isFocus }}"></input>
    </view>
    <view class="countdown_tips" hidden="{{ !isSendCode }}">{{ times }}后重新发送</view>
    <view class="resend" hidden="{{ isSendCode }}" bindtap="handleSendSms">重新发送</view>
  </view>
  <view class="btn_wrap">
    <button class="{{ code.length === 6 ? 'ready' : 'wait' }}" bindtap="handleVerifyCode">确定</button>
  </view>
</view>

JS 

Page({
  data: {
    code: '',
    isFocus: false,
    idx: 0,
    codeTimer: null,
    times: '60s',
    isSendCode: false,
    currentMobile: '13800138000',
  },

  onLoad: function () {
    this.setData({
    })
    this.handleSendSms()
  },
  onFocus (e) {
    this.setData({
      isFocus: true,
    })
  },
  handleInput (e) {
    this.setData({
      code: e.detail.value,
      idx: e.detail.value.length
    })
  },
  // 发送短信验证码
  handleSendSms () {
    this.setData({
      isSendCode: true,
      endTime: new Date() - 0 + 60 * 1000
    })
    this.countdown()
  },
  // 倒计时
  countdown () {
    let currentTime = new Date() - 0
     this.data.codeTimer = setTimeout(() => {
      let remainTimes = parseInt((this.data.endTime - currentTime) / 1000)
      this.setData({
        times: remainTimes + 's'
      })
      if (remainTimes <= 0) {
        clearTimeout(this.data.codeTimer)
        this.setData({
          isSendCode: false,
          sendCodeText: '重新发送',
          times: '60s'
        })
      } else {
        this.countdown()
      }
    }, 1000)
  },
  handleVerifyCode () {
    if (!this.data.code || this.data.code.length < 6) {
      wx.showToast({
        title: '请检查验证码后重试',
        icon: 'none'
      })
    }
  }
})

wxss 

.modify_password {height: 100%; overflow: hidden;}
.tips { text-align: center; margin-top: 45rpx;}
.tips > view {font-size: 28rpx; color: #999999; line-height: 40rpx;}
.tips > view:first-child {margin-bottom: 16rpx}

.code_area {margin-top: 29rpx;}
.input_area {height: 100rpx; display: flex; justify-content: center;}
.input_area > view { flex-shrink: 0; flex-grow: 0; line-height: 100rpx; font-size: 40rpx; width: 52rpx; height: 100rpx; margin-right: 48rpx; text-align: center; border-bottom: 4rpx solid #ccc; }
.input_area > view:nth-of-type(6) { margin-right: 0; }
.input_area > view.active {line-height: 92rpx;}
.hasValue {border-bottom: 4rpx solid #004BFF !important;}
.active:after {content: '|'; display: inline-block; animation: flash 1s 0s steps(1) both infinite;}
@keyframes flash {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

.countdown_tips {text-align: center; color: #999; margin-top: 48rpx;}
.resend {color: #004BFF; text-align: center; margin-top: 48rpx;}
.countdown_tips, .resend {font-size: 32rpx; line-height: 45rpx;}
.hidden_input {width: 0; height: 0; border: none;}

.btn_wrap {margin-top: 60rpx; }
.btn_wrap button {width: 670rpx; height: 94rpx; font-size: 34rpx; color: #fff;}
.wait {background-color: #6592FF; color: rgba(255, 255, 255, 0.6);}
.ready {background-color: #004BFF; color: rgba(255, 255, 255, 1);}

        后面找时间我会把这个验证码输入自动跳格的做成一个组件（vue），并且增加更多功能，方便使用。