现象描述:
使用快应用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
标签:web,windowSoftInputMode,网页,H5,软键盘,页面 From: https://www.cnblogs.com/developer-huawei/p/17027717.html