解决uni-app微信小程序input，textarea输入框在底部时,键盘弹起页面整体上移问题

最新推荐文章于 2025-03-15 13:02:05 发布

Sunny

最新推荐文章于 2025-03-15 13:02:05 发布

阅读量4k

点赞数 1

CC 4.0 BY-SA版权

文章标签： uni-app 前端

本文链接：https://blog.youkuaiyun.com/L_C_sunny/article/details/129099949

文章讲述了在移动设备上，当input或textarea获取焦点时键盘自动弹起，从而引起页面整体上移的问题。通过设置adjust-position属性为false可以防止页面上移。解决方案是取消键盘调整位置功能，以保持页面布局稳定。

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

问题是这样的input ，textarea获取焦点时会自动调起手机键盘，设置 :adjust-position=“true”，和不设置都会导致键盘弹起时页面整体上移
在这里插入图片描述

问题分析
input 获取焦点时会自动调起手机键盘，设置 :adjust-position=“true”，会导致键盘弹起时页面整体上移

思路：
设置使键盘弹起使页面不上移
设置输入框所在盒子为绝对定位
键盘弹起时获取键盘高度
设置输入框所在盒子的bottom的键盘高度

解決方案
:adjust-position=“false”

<textarea
          class="flex buyer_input_fd2_0"
          confirm-type="done"
          :placeholder="'说出你的问题，已购买的人会帮你解答哦~'"
          :maxlength="180"
          :show-num="true"
          placeholder-style="color:#999;font-size:28rpx"
          v-model="content"
          :adjust-position="false"
        />