在uni-app textarea组件中键盘弹起时onKeyboardHeightChange返回多次并错误高度

在uni-app textarea组件中键盘弹起时onKeyboardHeightChange返回多次并错误高度

开发环境 版本号 项目创建方式
Windows windows 10 HBuilderX 
### 操作步骤：

uni.onKeyboardHeightChange 监听键盘高度，然后来回点击textarea，获取焦点，弹起键盘

### 预期结果：

焦点时：
```javascript
{"height":412} 或者 {"height":368}

失焦时：

{"height":0}

实际结果：

看例子

bug描述：

在textarea组件中，当获取焦点时，uni.onKeyboardHeightChange 返回了3次值，而且好不稳定，时返回一次，时返回二次，时返回三次。

例子1： 焦点时：

{"height":412}  
{"height":44}  
{"height":0}

失焦时：

{"height":412}  
{"height":0}

例子2： 焦点时：

{"height":412}  
{"height":368}

失焦时：

{"height":412}  
{"height":0}

例子3： 焦点时：

{"height":412}  
{"height":44}  
{"height":0}

失焦时：

{"height":412}  
{"height":368}  
{"height":0}

例子4： 焦点时：

{"height":412}  
{"height":368}

失焦时：

{"height":412}  
{"height":368}  
{"height":0}

更多关于在uni-app textarea组件中键盘弹起时onKeyboardHeightChange返回多次并错误高度的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于在uni-app textarea组件中键盘弹起时onKeyboardHeightChange返回多次并错误高度的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的 uni-app 键盘高度监听问题。uni.onKeyboardHeightChange 在 textarea 焦点变化时会触发多次回调，且返回的高度值不稳定。

问题原因：

  1. 键盘动画过程中会多次触发高度变化
  2. 不同输入法切换时可能产生中间状态
  3. 系统键盘与自定义键盘的切换过程

解决方案： 在实际开发中需要对键盘高度变化进行防抖处理：

let keyboardTimer = null
uni.onKeyboardHeightChange(res => {
  clearTimeout(keyboardTimer)
  keyboardTimer = setTimeout(() => {
    // 使用最终稳定的高度值
    console.log('稳定键盘高度:', res.height)
    if (res.height > 100) {
      // 键盘弹起状态
    } else {
      // 键盘收起状态
    }
  }, 200)
})

或者使用标志位记录当前键盘状态：

let isKeyboardShow = false
uni.onKeyboardHeightChange(res => {
  if (res.height > 100 && !isKeyboardShow) {
    isKeyboardShow = true
    // 处理键盘弹起
  } else if (res.height <= 100 && isKeyboardShow) {
    isKeyboardShow = false
    // 处理键盘收起
  }
})
回到顶部