小程序弹窗中文本框textarea，唤起键盘后的BUG解决办法

最新推荐文章于 2024-06-25 15:20:54 发布

原创最新推荐文章于 2024-06-25 15:20:54 发布 · 5.1k 阅读

2 ·

CC 4.0 BY-SA版权

前端同时被 2 个专栏收录

22 篇文章

订阅专栏

微信小程序

4 篇文章

订阅专栏

博客主要解决两个手机端问题。一是手机唤起键盘后看不到文本框，解决办法是给 textarea 标签设置 cursor-spacing=\200\ 属性并添加 fixed 属性；二是弹窗 fixed 后 textarea 内容随页面滚动，解决办法是点击文本框后设弹窗 position 为 absolute，关闭后设为 fixed。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：

1.手机唤起键盘后，看不到文本框

2.弹窗fixed后，textarea内容随页面滚动

解决办法：

1.给textarea 标签设置 cursor-spacing="200" 属性，表示textarea 光标距离键盘的距离。添加fixed属性

 <view class="sw-msg" bindtap="transPos">
            <textarea fixed  bindinput="msgCon" cursor-spacing="200"  placeholder="{{placehoderTxt}}" />
        </view>

2.点击文本框后设置弹窗position为absolute，关闭文本框后设置弹窗position为fixed

toggle:function () {
          this.setData({
              pos:'fixed'
          })
          this.setData({
              open:!this.data.open
          })
      },
      transPos(){
          this.setData({
              pos:'absolute'
          })
      },