收藏
回答

input组件在失去焦点时,内部文字位置发生改变

问题模块
API和组件



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

}


最后一次编辑于  2017-06-29  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏关注问题回答