wxml:
<view class='content'>
<block wx:for="{{Length}}" wx:key="item">
<input class='iptbox' value="{{Value.length>=index+1?Value[index]:''}}" disabled type="number" catchtap='Tap'/>
</block>
</view>
<input name="password" type="number" class='ipt' maxlength="{{Length}}" focus="{{isFocus}}" bindinput="Focus"/>
<view>
</view>
<button class="resend" disabled="{{disabledFlag}}" data-id="2" bindtap="getVerificationCode">
{{time}}
</button>
wxss:
.content{
display: flex;
justify-content: space-around;
align-items: center;
margin: 0 80rpx;
}
.iptbox{
width: 80rpx;
height: 80rpx;
border-bottom:1rpx solid #ddd;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: 40rpx;
}
.ipt{
width: 0;
height: 0;
}
js:
Length: 6, //输入框个数
isFocus: true, //聚焦
Value: "",
转载,但是忘记地址了,所以写了原创,请见谅,侵联删