iOS端uni-app的uni-easyinput组件的@keyboardheightchange事件拿到的键盘高度比实际的要高一些

iOS端uni-app的uni-easyinput组件的@keyboardheightchange事件拿到的键盘高度比实际的要高一些

项目 信息
产品分类 uniapp/App
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 15.6
HBuilderX类型 正式
HBuilderX版本号 4.75
手机系统 iOS
手机系统版本号 iOS 18
手机厂商 模拟器
手机机型 iPhone16
页面类型 vue
vue版本 vue3
打包方式 离线
项目创建方式 HBuilderX

示例代码：

<view class="fixed2" :style="{ 'bottom': keyboardHeight + 'px' }" v-if="showIpt">
<uni-easyinput [@keyboardheightchange](/user/keyboardheightchange)="heightChange" :adjust-position="false" focus type="textarea" :maxlength="1200" autoHeight placeholder="说点什么吧～" />
</view>  
<script setup>
let keyboardHeight = ref(0)
let heightChange = function(e){
keyboardHeight.value = e.detail.height
}
</script>

操作步骤：

如题

预期结果：

如题

实际结果：

如题

bug描述：

iOS端uni-easyinput组件的@keyboardheightchange事件拿到的键盘高度比实际的要高一些？（安卓正常，iOS会高出这么一截）


更多关于iOS端uni-app的uni-easyinput组件的@keyboardheightchange事件拿到的键盘高度比实际的要高一些的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

uni-easyinput 是最新版本吗？换成input是正常的吗？

更多关于iOS端uni-app的uni-easyinput组件的@keyboardheightchange事件拿到的键盘高度比实际的要高一些的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在iOS端，uni-easyinput组件的@keyboardheightchange事件返回的键盘高度确实可能包含底部安全区域（safe area inset）的高度，导致测量值比实际键盘可视区域偏高。这是由于iOS系统在全面屏设备上键盘弹出时，会包含底部的安全距离。

从你的截图来看，输入框与键盘之间存在的空白区域正是底部安全区。在iOS中，这部分区域通常由系统自动添加，以确保内容不会被设备圆角或刘海遮挡。

解决方案：

  1. 使用uni.getSystemInfoSync()获取安全区域高度进行修正：

    const systemInfo = uni.getSystemInfoSync();
const safeAreaInsets = systemInfo.safeAreaInsets; // 获取安全区域边界
const bottomSafeArea = safeAreaInsets?.bottom || 0; // 提取底部安全区域高度

let heightChange = function(e) {
  // 从事件中获取的键盘高度减去底部安全区域
  keyboardHeight.value = e.detail.height - bottomSafeArea;
}

  2. 使用CSS环境变量（推荐，兼容性较好）： 在样式中直接使用安全区域：

    .fixed2 {
  padding-bottom: env(safe-area-inset-bottom);
}

    结合JS：

    let heightChange = function(e) {
  // 如果已经用CSS处理了安全区域，这里可以直接使用原始高度
  keyboardHeight.value = e.detail.height;
}
回到顶部