下程序input框letter-spacing失效，模拟实现

要实现这样的效果，但是input下的letter-spacing不起作用，只能模拟实现。

参考文章https://blog.youkuaiyun.com/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'

})

}

},