HarmonyOS鸿蒙Next中【快应用】H5网页弹出软键盘后页面没有上移
HarmonyOS鸿蒙Next中【快应用】H5网页弹出软键盘后页面没有上移
现象描述:
使用快应用web组件加载某H5网页时,比如帐号登录、帐号注册等带有输入框的页面,当输入框获取焦点,弹出的软键盘挡住了H5网页的部分内容。
问题分析:
- 该问题和web组件的页面布局有关系。 上述template代码中把web作为根节点,软键盘呼出时,没有触发快应用引擎布局的重新计算,导致页面没有上移。
- 另外,需要确认manifest.json文件中windowSoftInputMode的值。 如果不为adjustPan,也会导致页面没有上移。
解决方法:
- 在web组件外套一层div,将div作为根节点。
<template>
<div class="doc-page ">
<web class="web-page" src="{{loadUrl}}" trustedurl="{{list}}" onpagestart="onPageStart" "onPageFinish"" onMessage" "onTitleReceive" onerror="onError" id="web" supportzoom="true" wideviewport="true" overviewmodeinload="true" multiwindow="true" allowthirdpartycookies="true">
</web>
</div>
</template>
- 设置manifest.json文件中windowSoftInputMode的值为adjustPan。
"display": {
"windowSoftInputMode": "adjustPan",
"pages": {
"Main": {
"titleBar": true
}
}
}
更多关于HarmonyOS鸿蒙Next中【快应用】H5网页弹出软键盘后页面没有上移的实战教程也可以访问 https://www.itying.com/category-93-b0.html
1 回复
更多关于HarmonyOS鸿蒙Next中【快应用】H5网页弹出软键盘后页面没有上移的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙Next中,快应用H5网页弹出软键盘后页面没有上移,可能是由于页面布局或CSS样式问题导致的。建议检查以下几点:
- 视口设置:确保
<meta name="viewport">
标签正确设置,特别是width=device-width
和initial-scale=1
。 - CSS样式:检查是否有
position: fixed
或overflow: hidden
等样式影响了页面布局。 - 输入框位置:确保输入框位于页面可视区域,避免被软键盘遮挡。
- JavaScript处理:可以通过监听
resize
或focus
事件,手动调整页面滚动位置。
如果问题依旧,建议使用鸿蒙开发者工具进行调试,或参考官方文档获取更多支持。