小程序多个输入框输入验证码功能

转载自：
https://blog.csdn.net/qq_42205731/article/details/85289372

wxml:

<view class='container'>
  <view class='mask'></view>
  <!-- 输入核验码 -->
  <view class="query">
    <view class="query_item_name">
      <text class='query-title'>填写验证码</text>
      <text class='query-text'>验证码已发送至134********请查收</text>
    </view>
    <view class="query_num_block">
        <input type='number' class="num_item_block" wx:for="{{4}}" wx:key="{{index}}" disabled bindtap='onFocus' value="{{iptValue.length>=index+1?iptValue[index]:''}}" />
    </view>
    <input name="password" password="{{true}}" class='hidden_ipt' maxlength="{{4}}" focus="{{isFocus}}" bindinput="setValue"></input>
    <view class="confirm" bindtap='examine'>确认</view>
    <view class='change-phone'>更换手机号</view>
  </view>
</view>

wxss:

.container{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.mask{
  width:100%;
  height:100%;
  background-color:rgba(0,0,0,.5);
  position:fixed;
  top:0;
}

.query {
  z-index: 999;
  background-color: #fff;
  position: fixed;
  top: 20%;
  width: 412rpx;
  display:flex;
  flex-direction:column;
  align-items:center;
  height: 594rpx;
  padding: 71rpx 56rpx 55rpx;
  border-radius: 30rpx;
}
.query_item_name{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 120rpx;
}
.query-title{
  font-size: 36rpx;
  color: #000;
  margin-bottom: 46rpx;
}
.query-text{
  font-size: 24rpx;
  color: #707070;
}
.query_num_block{
  width: 100%;
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
}
.confirm{
  margin: 58rpx 0 40rpx;
  width:411rpx;
  height: 74rpx;
  background: linear-gradient(to right, #2EB90D , #67E24A); 
  border-radius: 50rpx;
  text-align: center;
  line-height: 74rpx;
  font-size: 27rpx;
  color: #fff;
}
.num_item_block{
  height: 107rpx;
  width:56rpx;
  border-bottom:5rpx solid rgba(59,147,58,.55);
  line-height: 107rpx;
  text-align: center;
  font-size: 73rpx;
  color: #000;
}
.hidden_ipt{
  height: 0rpx;
  width:0rpx;
  border:none;
  margin:0;
}
.change-phone{
  font-size: 24rpx;
  color: #707070;
}

js:

Page({
  /**
   * 页面的初始数据
   */
  data: {
    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 });
  },
})