uni-app webview嵌入input页面 安卓手机点击input输入框后 底部输入框无法弹起
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 |
这里有一个官方的回答,配置第一个页面,“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的具体实现或考虑其他系统级的问题。