uni-app webview嵌入input页面 安卓手机点击input输入框后 底部输入框无法弹起

发布于 1周前 作者 yuanlaile 来自 Uni-App

uni-app webview嵌入input页面 安卓手机点击input输入框后 底部输入框无法弹起

操作步骤

webview嵌入input框页面,点击input框时,键盘弹起 input框没有弹起被遮挡

预期结果

input框弹起不被键盘遮挡

实际结果

webview嵌入input框页面,点击input框时,键盘弹起 input框没有弹起被遮挡

bug描述

当webview页面设置 “navigationStyle”: “custom”,安卓手机点击过input输入框后webview 底部输入框无法弹起

项目 信息
产品分类 uniapp/App
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 mac
HBuilderX类型 正式
HBuilderX版本号 3.8.7
手机系统 Android
手机系统版本号 Android 12
手机厂商 华为
手机机型 p30
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

4 回复

这里有一个官方的回答,配置第一个页面,“softinputMode”: “adjustResize” ,你可以试试https://ask.dcloud.net.cn/question/92008


这个帖子里面的方法我都试了,在进入webview之前,如果有输入框弹起键盘,那么进去就没有问题,如果没有弹起键盘直接进去webview里面输入,那么input框就不会弹起会被键盘遮挡

现在解决了吗?还是不好使呢

在uni-app中嵌入webview并处理安卓设备上input输入框无法弹起的问题,通常涉及到Android系统键盘与webview的交互问题。下面是一个通过调整Android Manifest和webview设置来解决该问题的示例代码。

1. 修改Android Manifest

首先,确保在AndroidManifest.xml中为你的应用添加了必要的权限和配置,特别是关于软键盘的。以下是一个示例配置:

<activity
    android:name=".YourMainActivity"
    android:windowSoftInputMode="adjustResize|stateHidden">
    <!-- 其他配置 -->
</activity>

这里windowSoftInputMode设置为adjustResize|stateHidden,表示当软键盘出现时,活动(Activity)会调整大小以适应软键盘,同时初始状态下软键盘是隐藏的。

2. 在uni-app中配置webview

在你的uni-app项目中,确保webview组件正确配置。以下是一个简单的webview组件使用示例:

<template>
  <view>
    <web-view src="https://your-embedded-webpage.com"></web-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 数据定义
    };
  },
  methods: {
    // 方法定义
  }
};
</script>

<style>
/* 样式定义 */
</style>

3. 调整Webview内部页面

如果问题依旧存在,可能需要调整webview内部页面的CSS和JavaScript。确保页面中的input元素没有超出可视区域,并且没有设置阻止键盘弹出的CSS属性(如overflow: hidden)。

4. 使用JavaScript监听键盘事件

在webview加载的页面中,可以通过JavaScript监听键盘事件,尝试手动调整页面布局。以下是一个示例代码:

window.addEventListener('resize', function() {
  // 监听窗口大小变化,调整页面布局
  setTimeout(() => {
    document.body.style.height = window.innerHeight + 'px';
  }, 0);
});

document.querySelector('input').addEventListener('focus', function() {
  // 当input获得焦点时,尝试触发软键盘
  window.scrollTo(0, document.body.scrollHeight);
});

5. 调试与测试

最后,在安卓设备上进行充分的测试,确保所有配置和代码修改都正确无误,并且解决了输入框无法弹起的问题。

通过上述步骤,你应该能够解决uni-app中webview嵌入input页面时,安卓手机点击input输入框后底部输入框无法弹起的问题。如果问题依旧存在,可能需要进一步检查webview的具体实现或考虑其他系统级的问题。

回到顶部