微信小程序：验证码功能，解决多个input切换时页面闪烁的问题

思路：

1. 6个input框做【验证码显示】，样式：width: 80rpx; height: 80rpx; 设置禁用：disabled="true"；

2. 1个input框做【验证码输入】，样式：width: 0; height: 0; opacity: 0;（通过样式隐藏该input）

3. 点击6个用于验证码显示的input框时，触发bindtap事件，通过该事件将焦点切换到做验证码输入的input框（利用focus属性），此时系统自动弹出键盘

4. 用户键盘输入数字或删除数字时，触发bindinput事件，通过该事件将输入值转换成数组，分别显示到6个用于验证码显示的input框（利用value属性）

page.wxml

  <view class="verifyInfo">
    <view class="title">输入验证码：</view>
    <view class="codeWrap">
      <input type="number" maxlength="1" value="{{verifyCode[0]}}" bindtap="onClickInput" data-index="0" disabled="true"/>
      <input type="number" maxlength="1" value="{{verifyCode[1]}}" bindtap="onClickInput" data-index="1" disabled="true"/>
      <input type="number" maxlength="1" value="{{verifyCode[2]}}" bindtap="onClickInput" data-index="2" disabled="true"/>
      <input type="number" maxlength="1" value="{{verifyCode[3]}}" bindtap="onClickInput" data-index="3" disabled="true"/>
      <input type="number" maxlength="1" value="{{verifyCode[4]}}" bindtap="onClickInput" data-index="4" disabled="true"/>
      <input type="number" maxlength="1" value="{{verifyCode[5]}}" bindtap="onClickInput" data-index="5" disabled="true"/>
    </view>
    <view class="codeWrap2">
      <input type="number" maxlength="6" focus="{{currentInput==999}}" bindinput="onInputHiddenNumber" />
    </view>
    <view class="button">
      <button type="primary" bindtap="onSignin">打卡签到</button>
    </view>
  </view>

page.wxss

.verifyInfo {
  margin-top: 25rpx;
  background: #ffffff;
}

.verifyInfo .title {
  padding: 25rpx;
}

.codeWrap {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  padding-top: 50rpx;
  z-index: 100;
}
.codeWrap input {
  width: 80rpx;
  height: 80rpx;
  background: #eeeeee;
  margin: 0 10rpx;

  color: orange;
  font-size: large;
  text-align: center;
}

.codeWrap2 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  position: relative;
  top: -80rpx;
  z-index: 99;
}
.codeWrap2 input {
  background: #eeeeee;

  color: orange;
  font-size: large;
  text-align: center;

  width: 0;
  height: 0;
  opacity: 0;
}

.verifyInfo .button {
  padding: 100rpx 0;
}

page.js

  // 点击input-焦点切换到隐藏的input
  onClickInput: function (e) {
    let index = e.currentTarget.dataset.index
    console.log('index', index)
    this.setData({
      currentInput: 999,
    })
  },

  //隐藏的input输入数字验证码-拆分显示
  onInputHiddenNumber: function (e) {
    let value = "" + e.detail.value
    // 存储输入的数字
    this.setData({ hiddenNumber: value })
    // 输入的数字转数组
    let arr = value.split('')
    for(let i=0; i<6; i++) {
      let certain = 'verifyCode['+i+']'    
      if(typeof(arr[i])!='undefined') {    
        this.setData({ [certain]: arr[i] })
      }else {
        this.setData({ [certain]: '' })
      }
    }
  },