【快应用】H5网页弹出软键盘后页面没有上移

​ 现象描述：

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

问题代码如下：

<template>

<web src="{{loadUrl}}" trustedurl="{{list}}" "onPageStart" "onPageFinish"

"onMessage" "onTitleReceive" "onError" id="web" supportzoom="true"

wideviewport="true" overviewmodeinload="true"

multiwindow="true"

allowthirdpartycookies="true">

</web>

</template>

 

问题分析：

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>

2、设置manifest.json文件中windowSoftInputMode的值为adjustPan。

"display": {

"windowSoftInputMode":"adjustPan",

"pages": {

"Main": {

"titleBar": true

}

}

}

​欲了解更多更全技术文章，欢迎访问https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh