如图所示,在输入的时候一切正常,但是当失去焦点的时候input框的文字就移位了
部分代码如下:
wxml:
<view class=“main”>
<text>退货商品物流单号</text>
<text>(限{{startTime_txt}}~{{endTime_txt}}的物流单号)</text>
<view class=“ipt_group”>
<input type=“text” bindinput=“bindIptInput” maxlength=“30” focus=“true” value="{{expressNo}}" />
<view class=“icon_clear” style=“display: {{expressNo.length>0 ? ‘block’:‘none’}}” bindtap=“bindClearTap”>
<icon type=“clear” size=“23” />
</view>
</view>
</view>
js:
bindIptInput: function (event) {
let expressNo = event.detail.value;
this.setData({
expressNo: expressNo
});
},
/**
* 清除物流单号输入框内容
*/
bindClearTap: function () {
this.setData({
expressNo: ‘’
})
},
wxss:
.express .top .main {
display: flex;
flex-direction: column;
}
.express .top .main text {
text-align: center;
}
.express .top .main text:nth-child(2) {
color: #ff9110;
}
.express .top .main .ipt_group {
position: relative;
height: 84rpx;
width: 570rpx;
margin: 20rpx auto 0;
padding: 10rpx 0;
border: 1rpx solid #eee;
border-radius: 10rpx;
}
.express .top .main .ipt_group input {
height: 100%;
width: 100%;
padding: 0 70rpx 0 30rpx;
color: #646464;
font-weight: 700;
font-size: 45rpx;
text-indent: 40rpx;
outline: 0;
}
.express .top .main .ipt_group .icon_clear {
position: absolute;
top: 17rpx;
right: 10rpx;
z-index: 10;
}