<view class='box'><view class='row' bindtap='inputFocus'><view class="{{index == active ? 'active' : '' }}" wx:for="{{Length}}" wx:key="index"><input type="number" value="{{entryList.length>=index+1?entryList[index]:''}}" disabled></input></view></view><input type="number" class='entry' maxlength="{{Length}}" focus="{{isFocus}}" bindinput="inputValue"></input></view>
.row {display: flex;align-items: center;justify-content: space-around;}.row view {width: 80rpx;height: 80rpx;border: 1px solid #f5f5f5;border-radius: 5rpx;display: flex;align-items: center;justify-content: center;}.row view input {width: 100%;height: 100%;text-align: center;}.active {border: 1px solid red !important;}.entry {width: 0;height: 0;opacity: 0;}
Page({data: {isFocus: true,Length: 6,entryList: "",active: 0,},inputFocus() {this.setData({isFocus: true})},inputValue(e) {var value = e.detail.value;var list= e.detail.value.split('')this.setData({entryList: value,active: list.length})},})
