微信小程序ios和安卓键盘 textarea每次输入超过一行或者换行时textarea位置会往上偏移

微信小程序ios和安卓键盘 textarea每次输入超过一行或者换行时textarea位置会往上偏移

第一次尝试使用cursor-spacing解决

    微信小程序使用 textarea ,ios 和 安卓 手机 ,键盘会挡住输入框。使用了 cursor-spacing 属性, 指定光标与键盘的距离。取textarea距离底部的距离和cursor-spacing指定的距离的最小值作为光标与键盘的距离 。 在ios上,键盘不遮挡输入框。**但是在安卓手机上, cursor-spacing 指定之后,每次输入超过一行或者换行时textarea位置会往上偏移,与键盘之间产生了距离**。


最后的解决办法

1、首先使用adjust-position属性 ,设置为 adjust-position="{{false}}" ,不让弹起键盘导致整个页面推上。

2、使用 bindfocus 以及  bindblur  。

bindfocus 输入框聚焦时触发,event.detail = { value, height },height 为键盘高度。获取键盘高度。

bindfocus(e) {

    const { height } = e.detail;

    this.setData({

      height: height

    })

  },

  bindblur(){

    this.setData({

      height: 0

    })

  },


3、当键盘聚焦时,获取键盘的高度,给盒子设置 bottom 值,距离底部多少高度。当失去焦点时,bottom设为0 。即可完美解决问题。

<view class="padding-xl cu-content" style="bottom:{{height}}px">

        <textarea  placeholder="请填写..." value="{{content}}" bindinput="bindinput" cursor-spacing="140" adjust-position="{{false}}"  bindfocus="bindfocus" bindblur="bindblur"></textarea>

  </view>

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容