收藏
回答

textarea组件通过focus控制后bindinput方法莫名的失效了?

点击快捷输入文本后,偶尔会出现bindinput不生效,导致内容没有赋值。

<textarea value="{{commentDetail}}" bindfocus='focusComment' bindblur="blurComment" bindinput="textareaBInput" focus="{{isFocus}}" show-confirm-bar="{{false}}" hold-keyboard="{{true}}" placeholder="请留下您的品酒笔记以便日后回忆,\n也可以直接发布" adjust-position="{{false}}" maxlength="2000"></textarea>
  <!-- 输入框悬浮键盘上 -->
  <view wx:if="{{inputBottom}}" class="comment_container flex" style="bottom:{{inputBottom}}px">
    <view bindtap="sendComment" data-value="0" class="quick-tip flex-sub">「外观」</view>
    <view bindtap="sendComment" data-value="1" class="quick-tip flex-sub">「香气」</view>
    <view bindtap="sendComment" data-value="2" class="quick-tip flex-sub">「味道」</view>
    <view bindtap="sendComment" data-value="3" class="quick-tip flex-sub">「配餐推荐」</view>
  </view>

JS
  // 失焦事件
  blurComment(e) {
    console.log("失焦事件");
    this.setData({
      inputBottom: 0,
      isFocus: false
    })
  },

  // 点击评价悬浮框文字
  sendComment(e) {
    let commentDetail = this.data.commentDetail;
    let value = this.data.nameList[app.getEventDataset(e).value];
    let n = commentDetail.length > 0 ? `\n${value}` : `${value}`;
    commentDetail = commentDetail + n;
    let textareaLen = parseInt(commentDetail.length);
    console.log(textareaLen, 'textareaLen', this.data.inputBottom);
    this.setData({
      commentDetail,
      textareaLen,
      isFocus: true
    })
  },

  // 聚焦事件
  focusComment(e) {
    const that = this;
    // height 为获取到的键盘的高度
    const {
      height,
    } = e.detail
    console.log("聚焦事件");


    wx.getSystemInfo({
      success(res) {
        that.setData({
          inputBottom: height,
          keyboardHeight: height,
          // keyboardHeight为存储的键盘高度,后续如果不想再获取键盘高度可使用该值
        })
        // 如果发现ios和安卓不满意,可自行配置需要逻辑
        if (res.platform == 'ios') {
          // ios逻辑
        } else {
          // android逻辑
        }
      }
    })
  },
回答关注问题邀请回答
收藏

1 个回答

  • 社区技术运营专员-Jahozheng
    社区技术运营专员-Jahozheng
    04-12

    请具体描述问题出现的流程,并提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    04-12
    有用
    回复
登录 后发表内容