uni-app 点击input框后，监听键盘弹出事件失效（已提交测试案例）

uni-app 点击input框后，监听键盘弹出事件失效（已提交测试案例）

项目信息 详情
产品分类 uniapp/App
PC开发环境操作系统 Windows
HBuilderX类型 正式
HBuilderX版本号 3.3.12
手机系统 Android
手机系统版本号 Android 11
手机厂商 华为
手机机型 所有安卓端
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

操作步骤：

  • 真机或打包运行app，随意点击任何input框后可以复现问题

预期结果：

  • onKeyboardHeightChange事件监听失效。原生键盘弹出页面向上缩小事件失效

实际结果：

  • 应该可以监听，原生事件不失效

bug描述：

在点击页面任何一个input框。弹出键盘后
所有页面（vue、nvue）onKeyboardHeightChange事件失效
并且原生的键盘弹出向上缩小的效果也消失了
补充。。。我写了一个测试，可以真机测试一下，
先直接进客服，然后点一下输入框，再进客服。
如果想复原。就要退出app并清理后台。再次进app然后进客服就好用了
现在版本自带了处理方案，如要观看bug情况请注释onKeyboardHeightChange事件

测试bug.zip


更多关于uni-app 点击input框后，监听键盘弹出事件失效（已提交测试案例）的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

不止华为。我说的是所有的安卓端都会有这个问题
ios还没有试用

更多关于uni-app 点击input框后，监听键盘弹出事件失效（已提交测试案例）的实战教程也可以访问 https://www.itying.com/category-93-b0.html


未复现此问题，请提供简单、可稳定复现、能直接运行的完整示例（上传附件），方便我们快速排查问题哦。 【bug优先处理规则】https://ask.dcloud.net.cn/article/38139

可能说的不详细。我这里的需求是这样的 我内嵌了一个网页客服。 正常的用客服都是可以在键盘弹出时。把页面顶起来。 在点击了app的input框口。在我webview里点击客服对话框就会造成键盘覆盖对话框，看不见自己输入的字 现在我的解决办法监听键盘高度，然后判断页面自动上浮功能是否好用，然后再给我嵌入的页面上浮 我怀疑是input的自带的浮动到键盘上方的这个事件。把全局的事件都覆盖了。 没有点击过input。我上述说的都好用 点击之后。在客服页面就不会自动上浮也不会触发onKeyboardHeightChange。 所以最后我只能使用onKeyboardHeightChange判断键盘高度。然后再判断页面是否上浮后，在做处理

等我稍后想一下怎么提交一个可测试的案例

已上传测试案例。请尽快查看解决一下。压缩包内已含解决办法，如要测试bug情况。请注释onKeyboardHeightChange监听即可

我也碰到过监听不了变化值的情况，通过这篇文章解决了：监听 input 键盘事件获取不到按下按键值

在 uni-app 中，监听键盘弹出事件失效的问题可能由多种原因引起。以下是一些可能的原因和解决方案：

1. 事件绑定问题

确保你正确绑定了键盘弹出事件。在 uni-app 中，通常使用 @focus 或 @blur 事件来监听输入框的聚焦和失焦状态。

<template>
  <view>
    <input type="text" @focus="onFocus" @blur="onBlur" />
  </view>
</template>

<script>
export default {
  methods: {
    onFocus() {
      console.log('键盘弹出');
    },
    onBlur() {
      console.log('键盘收起');
    }
  }
}
</script>

2. 平台差异

uni-app 支持多平台（如微信小程序、H5、App等），不同平台对键盘事件的实现可能有所不同。确保你在目标平台上测试了代码。

3. 键盘高度获取

如果你需要获取键盘的高度，可以使用 uni.onKeyboardHeightChange 方法（仅支持 App 和微信小程序）。

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

4. 输入框类型

某些输入框类型（如 textarea）可能会影响键盘的弹出行为。确保你使用的输入框类型与你的需求匹配。

5. 页面布局问题

有时页面布局问题（如 fixed 定位的元素）可能会影响键盘的弹出和事件监听。检查页面布局，确保没有其他元素干扰。

6. 版本问题

确保你使用的 uni-app 版本是最新的，或者至少是稳定的版本。某些旧版本可能存在已知的 bug。

7. 调试工具

使用调试工具（如 Chrome DevTools 或微信开发者工具）来检查事件是否被正确触发。你可以在控制台中查看日志输出。

8. 提交测试案例

如果你已经提交了测试案例，确保测试案例能够复现问题。你可以尝试简化测试案例，排除其他可能的干扰因素。

9. 社区支持

如果以上方法都无法解决问题，可以尝试在 uni-app 官方社区或 GitHub 仓库中寻求帮助，提供详细的复现步骤和代码片段。

示例代码

以下是一个完整的示例代码，展示了如何监听键盘的弹出和收起事件：

<template>
  <view>
    <input type="text" @focus="onFocus" @blur="onBlur" />
  </view>
</template>

<script>
export default {
  methods: {
    onFocus() {
      console.log('键盘弹出');
      // 如果需要获取键盘高度
      uni.onKeyboardHeightChange(res => {
        console.log('键盘高度变化:', res.height);
      });
    },
    onBlur() {
      console.log('键盘收起');
    }
  }
}
</script>

<style>
/* 样式代码 */
</style>
回到顶部