微信小程序监听键盘变化改变textarea位置

需求:做一个能够点击评论后自动弹起键盘并且在键盘上有一个textarea的输入框

思路:先将textarea隐藏起来,当点击评论后显示,这个时候,利用微信textarea的属性auto-focus自动聚焦,拉起键盘。然后将定位textarea的bottom修改为键盘高度,收起时监听键盘的高度,当高度等于0时,将textarea隐藏

注意:小程序中textarea的bindkeyboardheightchange属性能够监听到键盘的高度,当键盘高度发生变化的时候触发事件,在ios系统中能够正常使用,但是在部分安卓手机中出现bug,点击键盘外空白出,键盘收起,但是事件并没有触发,后来发现用api能够解决这个问题,但是也要注意,这两个都会在键盘升起或者收下时调用多次,后来发现弹起时第一次的数据是错误的,在ios中是0,在安卓不是0不是键盘高度,高度要比键盘高度小一些,所以需要将第一次监听到的高度去掉


IMG_1549(20200512-203100).png

部分代码

onShow: function() {
wx.onKeyboardHeightChange(res => { //监听键盘高度变化
      this.keyBoardChange(res.height)
})
},
 comment() {
  this.setData({
       showTextara: true,//将textarea显示,聚焦自动拉起键盘,此时触发了onKeyboardHeightChange
   })
keyBoardChange(height) {
    //键盘高度改变时调用
    if (this.data.first) { //弹起时第一次的数据是错误的,所以不需要修改keyBoardHeight
      this.setData({
        first: false  //将first改为false表示不是第一次调用
      })
    } else {
      let keyBoardHeight = height + 'px'
      this.setData({
        keyBoardHeight //将键盘的高度设置到data中,后续可以通过它来修改定位textarea的bottom,使它弹起或者收起
      })
     if (keyBoardHeight === '0px') {
          this.setData({
            showTextara: false //键盘高度等于0时,隐藏textarea
          }) 
      }
    }
  },
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容