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

老套路,先上图 

  
  
    请输入核验码
    
        
    
    
    确认
  

 

.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 });
  },
})