HarmonyOS鸿蒙Next中【快应用】H5网页弹出软键盘后页面没有上移

HarmonyOS鸿蒙Next中【快应用】H5网页弹出软键盘后页面没有上移

现象描述:

使用快应用web组件加载某H5网页时,比如帐号登录、帐号注册等带有输入框的页面,当输入框获取焦点,弹出的软键盘挡住了H5网页的部分内容。

问题分析:

  1. 该问题和web组件的页面布局有关系。 上述template代码中把web作为根节点,软键盘呼出时,没有触发快应用引擎布局的重新计算,导致页面没有上移。
  2. 另外,需要确认manifest.json文件中windowSoftInputMode的值。 如果不为adjustPan,也会导致页面没有上移。

解决方法:

  1. 在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>
  1. 设置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样式问题导致的。建议检查以下几点:

  1. 视口设置:确保<meta name="viewport">标签正确设置,特别是width=device-widthinitial-scale=1
  2. CSS样式:检查是否有position: fixedoverflow: hidden等样式影响了页面布局。
  3. 输入框位置:确保输入框位于页面可视区域,避免被软键盘遮挡。
  4. JavaScript处理:可以通过监听resizefocus事件,手动调整页面滚动位置。

如果问题依旧,建议使用鸿蒙开发者工具进行调试,或参考官方文档获取更多支持。

回到顶部