下程序input框letter-spacing失效，模拟实现
要实现这样的效果，但是input下的letter-spacing不起作用，只能模拟实现。
参考文章https://blog.****.net/luoyumeiluoyumei/article/details/81509694
html部分：
<!--此处input要隐藏起来 -->
<input type='number' class='codeInput' placeholder-class="placeholder" maxlength='4' bindinput='inputcatch'></input>
<!--inputCon用来模拟input输入的效果 -->
<view class='inputCon'>
<view class="inputItem">
<view wx:if="{{!numList.length}}" class="cursor"></view>
<text wx:if="{{numList.length}}">{{numList[0]}}</text>
</view>
<view class="inputItem">
<view wx:if="{{numList.length===1}}" class="cursor"></view>
<text wx:if="{{numList.length>=2}}">{{numList[1]}}</text>
</view>
<view class="inputItem">
<view wx:if="{{numList.length===2}}" class="cursor"></view>
<text wx:if="{{numList.length>=3}}">{{numList[2]}}</text>
</view>
<view class="inputItem">
<view wx:if="{{numList.length===3}}" class="cursor"></view>
<text wx:if="{{numList.length>=4}}">{{numList[3]}}</text>
</view>
</view>
</view>
<view class='dashed'>
<text class='dashedItem'></text>
<text class='dashedItem'></text>
<text class='dashedItem'></text>
<text class='dashedItem'></text>
</view>
css部分
.dashed{
display: block;
width: 320rpx;
margin: 0 auto;
margin-top: -30rpx;
}
.dashedItem{
display: inline-block;
border-bottom: 2rpx solid #000;
width: 50rpx;
margin: 0rpx 15rpx;
margin-top: -10rpx;
}
.codeInput{
display: block;
/* background: red; */
width: 100%;
color: #000;
height: 100rpx;
margin-left: -20%;
}
.cursor {
width: 1px;
height:43rpx;
background-color: #000;
animation: focus 0.7s infinite;
}
.getcode.active{
background: #000;
}
/* 光标动画 */
@keyframes focus {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.inputCon{
width: 320rpx;
margin: 0 auto;
margin-top:-50rpx;
}
.inputItem{
width: 80rpx;
height: 50rpx;
vertical-align: top;
display: inline-block;
text-align: center;
}
.inputItem>text{
font-size: 43rpx;
}
js部分
data: {
numList:[],
confirmstatus:'',
code:''
},
inputcatch:function(e){
var that = this;
var value = e.detail.value;
var valueArray = value.split("");
console.info(valueArray);
that.setData({
numList: valueArray,
code: value
})
if (!/^\d{4}$/.test(e.detail.value)) {
that.setData({
confirmstatus: ''
})
return;
} else {
that.setData({
confirmstatus: 'active'
})
}
},