input组件在失去焦点时,内部文字位置发生改变
发布于 4 年前 作者 lei74 11352 次浏览 来自 问答

如图所示,在输入的时候一切正常,但是当失去焦点的时候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;

}

回到顶部