老套路,先上图
<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 });},
})
