uni-app textarea切换输入法不能动态监听键盘高度

uni-app textarea切换输入法不能动态监听键盘高度

项目信息 详情
产品分类 uniapp/小程序/微信
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 10
HBuilderX类型 正式
HBuilderX版本号 3.1.22
第三方开发者工具版本号 Nightly 1.05.2104012
基础库版本号 2.19.0
项目创建方式 HBuilderX

示例代码：

<template>  
    <view class="container">  
        <textarea type="text" value="" class="input" :cursor-spacing="5" :show-confirm-bar="false" placeholder="请输入"/>  
    </view>  
</template>

.container{  
    min-height: 100vh;  
}  
.input{  
    width: 100%;  
    height: 80rpx;  
    padding: 0 30rpx;  
    border: 2rpx solid #999;  
    position: fixed;  
    bottom: 0;  
}

操作步骤：

获取焦点默认输入法为非手写，高度正常，切换输入法为手写之后，高度没有自动变化

预期结果：

来回切换高度自适应

实际结果：

来回切换高度不变

bug描述：

手机：OPPO Reno5 V11.1 安卓11
使用textarea组件，切换输入法为手动后，再切换为其他，高度不能自适应，底部会出现一定的距离，使用定位和不适用定位都会如此，不仅微信小程序会这样，APP也会，体验相当不好，请修复


更多关于uni-app textarea切换输入法不能动态监听键盘高度的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

OPPO k9 安卓11手机测试未复现问题 此设备在旧版是否正常？ 此版本使用其他设备是否正常？ 仅你这个设备出现问题吗？用其他设备测试看下

更多关于uni-app textarea切换输入法不能动态监听键盘高度的实战教程也可以访问 https://www.itying.com/category-93-b0.html


编译到APP也有问题，之前也有这个问题，新项目我实在不能忍受了就给你们提了，我同事开发的其他APP也有同样的问题，群友也反馈过这个问题

回复 IT男: 仅你这个设备出现问题吗？用其他设备是否正常？如果也复现的话，请提供完整的复现机型信息

回复 DCloud_UNI_Anne: 太难受了，大部分是兼容的，我另一个同事的努比亚也是一样的情况，难受

回复 IT男: 请详细说明稳定可复现的机型具体信息，否则不能复现就无法解决

在 uni-app 中，textarea 组件在不同输入法切换时，键盘高度监听确实存在已知问题，尤其是在安卓设备上。这是由于底层平台（微信小程序、APP）对键盘高度变化的监听机制不一致导致的。

问题分析：

  • 微信小程序中，textarea 的 adjust-position 属性（默认为 true）会在键盘弹起时自动调整页面高度，但输入法切换时的键盘高度变化可能不会触发重新调整。
  • 在 APP 端，键盘高度监听依赖 uni.onKeyboardHeightChange 事件，但部分安卓机型在输入法切换时可能不会实时触发该事件。

解决方案：

  1. 使用 @focus 和 @blur 事件手动调整
    通过监听焦点事件，强制重新计算布局。示例：

    <textarea 
    @focus="handleFocus" 
    @blur="handleBlur"
    :adjust-position="false"
/>

    methods: {
    handleFocus() {
        // 触发页面滚动或高度调整
        uni.pageScrollTo({ scrollTop: 9999, duration: 0 });
    }
}

  2. APP 端使用 uni.onKeyboardHeightChange 监听
    在 onLoad 中监听键盘高度变化，动态调整 textarea 位置：

    onLoad() {
    uni.onKeyboardHeightChange(res => {
        this.keyboardHeight = res.height;
        // 根据高度调整 textarea 布局
    });
}
回到顶部