uni-app的 textarea 组件方法@keyboardheightchange获取键盘高度不正确

uni-app的 textarea 组件方法@keyboardheightchange获取键盘高度不正确

开发环境 版本号 项目创建方式
Mac 10.15.7 HBuilderX 3.98
Android Android 12 -
手机厂商 手机机型
OPPO PECM30

操作步骤：

template

```html
<textarea  
    class="chat-footer-content-input uni-textarea"  
    type="text"  
    placeholder="请输入内容"  
    :maxlength="300"  
    :auto-height="true"  
    :adjust-position="false"  
    [@keyboardheightchange](/user/keyboardheightchange)="onKeyboardheightchange"  
></textarea>

onKeyboardheightchange: function (event: InputKeyboardHeightChangeEvent):void{   
    console.log(event.detail.height)  
}

预期结果：

正确

实际结果：

不正确

bug描述：

textarea 组件获取键盘高度方法获取的值有问题


更多关于uni-app的 textarea 组件方法@keyboardheightchange获取键盘高度不正确的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

我刚试了下是可以，你试一下这个，看他俩的取值是一样的不 uni.onKeyboardHeightChange

更多关于uni-app的 textarea 组件方法@keyboardheightchange获取键盘高度不正确的实战教程也可以访问 https://www.itying.com/category-93-b0.html


uniappx 没有该api

有没有攻城师看看这个问题。。小米手机正常OPPO获取高度不正常

在 uni-app 中使用 textarea 组件的 @keyboardheightchange 事件时，可能会遇到获取键盘高度不正确的问题。这通常是由于不同平台或设备的键盘高度计算方式不同，或者在某些情况下，事件触发的时机不准确导致的。

以下是一些可能的原因和解决方案：

1. 平台差异

不同平台（如 iOS 和 Android）对键盘高度的计算方式可能不同。@keyboardheightchange 事件在某些平台上可能无法准确获取键盘高度。

解决方案：

  • 针对不同平台进行特殊处理，或者使用平台特定的 API 来获取键盘高度。
  • 在 iOS 上，可以使用 uni.onKeyboardHeightChange 来监听键盘高度变化。

2. 事件触发时机

@keyboardheightchange 事件可能在某些情况下触发时机不准确，导致获取的键盘高度不正确。

解决方案：

  • 在事件触发后，延迟一段时间再获取键盘高度，以确保键盘已经完全弹出或收起。
  • 使用 setTimeout 或 nextTick 来延迟处理。

3. 键盘高度计算方式

键盘高度可能包括或不包括某些系统组件（如导航栏、工具栏等），这可能导致获取的高度与实际高度不一致。

解决方案：

  • 手动调整获取的键盘高度，或者使用其他方法来计算实际可用的键盘高度。

4. 使用 uni.onKeyboardHeightChange

uni-app 提供了 uni.onKeyboardHeightChange 方法来监听键盘高度变化，这个方法可能比 @keyboardheightchange 更可靠。

示例代码：

uni.onKeyboardHeightChange(res => {
  console.log('键盘高度变化:', res.height);
});

5. 使用 uni.getSystemInfoSync

在某些情况下，可以通过 uni.getSystemInfoSync 获取屏幕高度，并结合当前页面的布局来计算键盘高度。

示例代码：

const systemInfo = uni.getSystemInfoSync();
const windowHeight = systemInfo.windowHeight;
const screenHeight = systemInfo.screenHeight;
const keyboardHeight = screenHeight - windowHeight;
console.log('键盘高度:', keyboardHeight);

6. 使用 uni.createSelectorQuery

通过 uni.createSelectorQuery 获取 textarea 的位置信息，结合键盘高度来计算实际可用的键盘高度。

示例代码：

const query = uni.createSelectorQuery().in(this);
query.select('#myTextarea').boundingClientRect(data => {
  console.log('textarea 位置信息:', data);
}).exec();
回到顶部