小程式多個輸入框輸入驗證碼功能 實作

老套路,先上圖 

<view class="check">
  <!-- 輸入核驗碼 -->
  <view class="query">
    <view class="query_item_name">請輸入核驗碼</view>
    <view class="query_num_block">
        <input type='number' class="num_item_block" wx:for="{{inputLen}}" wx:key="{{index}}" disabled bindtap='onFocus' value="{{iptValue.length>=index+1?iptValue[index]:''}}" />
    </view>
    <input name="password" password="{{true}}" class='hidden_ipt' maxlength="{{inputLen}}" focus="{{isFocus}}" bindinput="setValue"></input>
    <view class="confirm" bindtap='examine'>确認</view>
  </view>
</view>
           

.query{
  padding-top:90rpx;
}
.query .query_item_name{
  font-family: PingFangSC-Regular;
  font-size: 30rpx;
  color: #737586;
  letter-spacing: 0;
  text-align: center;
}
.query_num_block{
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
  padding-left:36rpx;
  padding-right:36rpx;
  margin:80rpx auto 110rpx;
}
.check .confirm{
  margin:auto;
  width:200rpx;
  height: 68rpx;
  background: #F86221;
  border-radius: 33px;
  text-align: center;
  line-height: 68rpx;
  font-family: PingFangSC-Medium;
  font-size: 30rpx;
  color: #FFFFFF;
  letter-spacing: 0;
}
.num_item_block{
  height: 116rpx;
  width:80rpx;
  border:1px solid #cdcdcd;
  font-family: PingFangSC-Regular;
  border-radius: 8rpx;
  line-height: 116rpx;
  text-align: center;
  font-size: 36rpx;
  color: #25252B;
}
.hidden_ipt{
  height: 0rpx;
  width:0rpx;
  border:none;
  margin:0;
}
           

Page({
  /**
   * 頁面的初始資料
   */
  data: {
    inputLen: 7,
    iptValue: "",
    isFocus: false,
  },
  onFocus: function (e) {
    var that = this;
    that.setData({ isFocus: true });
  },
  setValue: function (e) {
    var that = this;
    that.setData({ iptValue: e.detail.value });
  },
})