uni-app APP端真机调试打开h5页面软键盘弹出时不触发resize事件

uni-app APP端真机调试打开h5页面软键盘弹出时不触发resize事件

开发环境 版本号 项目创建方式
Windows window7 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：3.1.12

手机系统：Android

手机系统版本号：Android 10

手机厂商：华为

手机机型：OXF-AN10

页面类型：vue

打包方式：云端

示例代码：

```javascript
<!DOCTYPE html>  
<html lang="zh">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <meta http-equiv="X-UA-Compatible" content="ie=edge">  
    <title></title>  
    <style type="text/css">  

    </style>  
</head>  
<body>  
    <input type="" name="" id="" value="233333" />  
</body>  
</html>  
<script type="text/javascript">  
    window.addEventListener("resize",() => {  
        console.log('resize');  
        window.alert('resize')  
    })  
</script>

```javascript
<template>  
    <web-view :src="url"></web-view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                url:"/hybrid/html/test.html"  
            }  
        },  
        onLoad() {  

        },  
        methods: {  

        }  
    }  
</script>  

<style>  
</style>

操作步骤： 示例代码中

预期结果： 能监听到resize事件，触发alert（2333）

实际结果： 监听不到resize事件，无法触发alert（2333）

bug描述： 本意是想通过resize事件监听到软键盘的弹出，结果并没有触发


更多关于uni-app APP端真机调试打开h5页面软键盘弹出时不触发resize事件的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app APP端真机调试打开h5页面软键盘弹出时不触发resize事件的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 的 App 端，当使用 web-view 组件加载 H5 页面时，软键盘弹出不会触发标准的 resize 事件。这是因为在 Android 和 iOS 系统中，软键盘的显示机制与浏览器窗口大小变化不同，不会直接触发 window.resize 事件。

在您的示例中，H5 页面通过 window.addEventListener("resize") 监听窗口变化，但软键盘弹出时并未触发该事件，导致 alert 未执行。这是预期的平台行为，并非 uni-app 的 bug。

解决方案：

  1. 使用 focus 和 blur 事件：在 H5 页面中，通过监听输入框的 focus 和 blur 事件来间接检测软键盘的弹出和收起。例如：
    document.querySelector('input').addEventListener('focus', () => {
    console.log('软键盘弹出');
    alert('软键盘弹出');
});
  2. 使用 uni-app 原生监听：在 uni-app 页面中，通过 uni.onKeyboardHeightChange 方法监听键盘高度变化（仅 App 端支持），例如：
    uni.onKeyboardHeightChange(res => {
    console.log('键盘高度变化:', res.height);
    if (res.height > 0) {
        alert('软键盘弹出');
    }
});
回到顶部