uniapp - 键盘上推 踩坑

一、前言

这是一个很常见很普遍的功能了,在输入框获取到焦点后,弹出键盘,把页面上推。在 uni-app 关于 textarea 的介绍中有相关配置。

adjust-position,默认为 true 。键盘弹起时,是否自动上推页面

那从哪里开始推,推哪个地方,我的整个【输入框-键盘】是一个组件,当然是希望将整个组件上推的。查阅文档,有个参数来处理这个 推的 的目标点。

cursor-spacing,默认为 0 。指定光标与键盘的距离,单位 px 。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离

也就是说默认情况下,会从 输入框的底部 开始推,但组件的设计:

很明显,不能从 输入框的底部开始推,应该从整个组件的底部开始推。从这个属性的介绍来说,目前就是从输入框的底部开始推。

二、 缺陷初显

通过这个属性的介绍,可以设置 cursor-spacing 的大小,取 输入框下面功能区的高度的值。这时,聚焦输入框,键盘能推整个输入框组件向上。

!!!bug。正如属性的介绍,是光标与键盘的距离,假设值为 100 ,则光标与键盘的距离是 100。我也是忽略了一个一个问题,正常打字的时候,光标始终是在最后一行,也是紧贴这输入框底部。

这时,textarea 距离底部的距离 和 cursor-spacing 的值是相等的,因此所谓最小值,其实都相等。

当输入框内容多行时,移动光标到非最后一行处,键盘就会上移,覆盖部分组件 。其实,这个很容易理解,用前面属性的介绍来说,是对比 textarea 距离底部的距离 和 cursor-spacing 的值,取最小值。当移动光标时,textarea 距离底部的距离已经小于 cursor-spacing的值,因此存在这个缺陷。

三、方案

使用以上两个属性来实现 上推 功能,在我的实践看来,无法实现。后面,从 定位 得到了灵感。在做底部按钮或者顶部nav 的时候,存在 绝对定位和固定定位,那往往是需要给元素一个 padding ,把元素挤出来。调试的时候发现了,当键盘弹出的时候,类似固定定位,这时候只要给组件外层元素添加一个 padding-bottom,值为键盘的高度。

1. 获取键盘高度

html 复制代码
    <textarea
              class="input-inner"
              v-model="value"
              :auto-height="autoHeight"
              placeholder="请输入发送内容"
              placeholder-style="color:#B3B3B3"
              confirm-type="send"
              :adjust-position="false"
              :show-confirm-bar="false"
              :disable-default-padding="true"
              @confirm="handleSend"
              @keyboardheightchange="handleKeyboardheightchange"
            />

绑定 keyboardheightchange 获取键盘高度。

js 复制代码
    handleKeyboardheightchange(e) {
      this.keyboardHeight = e.detail.height;
    },

2. 设置外层元素边距

根据键盘高度动态设置外层元素的边距。

html 复制代码
 <view class="input" :style="style">
 // 已有代码
 </view>
vue 复制代码
  computed: {
    style() {
      const flag = this.keyboardHeight > 0;
      const height = flag
        ? `calc(5rpx + ${this.keyboardHeight}px)`
        : `calc(10rpx + env(safe-area-inset-bottom))`;
      return `padding-bottom: ${height}; `;
    },
  },

四、总结

记住!!! 像这种多行文本框,需要上推键盘的,就用 方案三 这种方式。

相关推荐
YCOSA202534 分钟前
ISO 雨晨 26200.6588 Windows 11 企业版 LTSC 25H2 自用 edge 140.0.3485.81
前端·windows·edge
小白呀白40 分钟前
【uni-app】树形结构数据选择框
前端·javascript·uni-app
云虎软件朱总1 小时前
配送跑腿系统:构建高并发、低延迟的同城配送系统架构解析
java·系统架构·uni-app
吃饺子不吃馅1 小时前
深感一事无成,还是踏踏实实做点东西吧
前端·svg·图形学
90后的晨仔2 小时前
Mac 上配置多个 Gitee 账号的完整教程
前端·后端
少年阿闯~~2 小时前
CSS——实现盒子在页面居中
前端·css·html
开发者小天2 小时前
uniapp中封装底部跳转方法
前端·javascript·uni-app
阿波罗尼亚2 小时前
复杂查询:直接查询/子查询/视图/CTE
java·前端·数据库
Q_Q19632884752 小时前
python+uniapp基于微信小程序的医院陪诊预约系统
开发语言·spring boot·python·微信小程序·django·flask·uni-app
武昌库里写JAVA3 小时前
SpringCloud与微服务
vue.js·spring boot·sql·layui·课程设计