收藏
回答

小程序textarea,软键盘的缩回影响了页面Data更新

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug textarea 客户端 6.7.2 2.3.0

- 当前 Bug 的表现(可附上截图)

真机环境,点击textarea输入框,弹出软键盘,输入消息,点击发送按钮,textarea的输入框内消息没清空,再次点击发送,消息才清空。总结原因:发送消息成功,软键盘缩回时阻止了页面data的更新。

   


- 预期表现

实际在点击发送时,消息this.setData({message:""})  ,message已经被设置为空,消息应该清空,这个在测试环境表现一切正常,没有软件盘时,点击发送也正常,均能清空消息;

真机环境因为有软键盘的弹出,点击发送软键盘缩回,消息发送成功,但是页面的data数据未及时更新。导致textarea依然是发送前的值。


- 复现路径


- 提供一个最简复现 Demo

index.wxml

<textarea id="message-textarea" class="message-textarea" bindlinechange="bindTextAreaChange" show-confirm-bar="" fixed="true"  cursor-spacing="0" selection-start="-1" selection-end='-1' bindinput="bindTextAreaInput" value='{{message}}' />
<button class="sendBtn" bindtap="sendMsg">发送</button>

index.js

Page({
  data: {
    message: '',
  },
  bindTextAreaInput: function(e) {
 
      this.setData({
        message: e.detail.value
      })
  },
  sendMsg: function() {
    this.setData({
      message:""
    });
  },
})


最后一次编辑于  2018-09-25
回答关注问题邀请回答
收藏

2 个回答

  • 韬々
    韬々
    2018-09-29

    同样使用6.7.2以及2.3.0版本测试,并没能复现问题。


    如果认为是setData的问题,那可以尝试一下远程调试或者在log里面打印this.data的值看看setData调用是否成功。

    2018-09-29
    有用
    回复 4
    • 王森
      王森
      2018-10-08

      真机才会出现这类问题

      2018-10-08
      回复
    • 王森
      王森
      2018-10-08回复王森

      console.log也打印过,用真机时打印的,就是数据没更新,请问你是用真机做的测试吗?

      2018-10-08
      回复
    • 王森
      王森
      2018-10-08


      2018-10-08
      回复
    • 王森
      王森
      2018-10-08回复王森

      用这个发送消息你就明白了

      第一种:输入完毕文字,点击缩回输入法软键盘,再点击发送,文字正常清空。

      第二种:输入完毕文字,不缩回软键盘,直接点击发送,文字不会清空。

      2018-10-08
      回复
  • 社区技术运营专员-小柿子
    社区技术运营专员-小柿子
    2018-09-25

    你好,请提供一下出现问题的机型和微信版本,以及能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    2018-09-25
    有用
    回复 5
登录 后发表内容