首页 > 其他分享 >【快应用】H5网页弹出软键盘后页面没有上移

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

时间:2023-01-05 15:35:24浏览次数:55  
标签:web windowSoftInputMode 网页 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

标签:web,windowSoftInputMode,网页,H5,软键盘,页面
From: https://www.cnblogs.com/developer-huawei/p/17027717.html

相关文章

  • 【快应用】H5网页弹出软键盘后页面没有上移
     现象描述:使用快应用web组件加载某H5网页时,比如帐号登录、帐号注册等带有输入框的页面,当输入框获取焦点,弹出的软键盘挡住了H5网页的部分内容。问题代码如下:<template><web......
  • bbs---文章子评论业务逻辑,后台管理页面搭建,添加文章页面搭建,富文本编辑器,添加文章功能
    昨日内容回顾个人站点侧边栏筛选功能1.研究侧边栏路由规律2.初步指定三个路由 站点名称\category\分类主键值 站点名称\tag\标签主键值 站点名称\archive\年-月......
  • 路由别名和404路由页面配置
    路由别名配置-alias配置路由重定向,当用户访问/a的时候,URL会被替换/b之后匹配实际路由/b配置路由别名,/a的别名是/b,当用户访问/b的时候,URL会保持为/b,但路由匹配为/a,和用......
  • uni-app 打包H5时,访问index.html页面白屏报错net::ERR_ABORTED 404
    uni-app打包H5后,访问index.html页面,页面却是白屏,Console控制台报错404,报错图如下:    原因:  解决方法:  配置文件manifest.json文件中H5配置里面,一开始......
  • h5代码模板
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metaname="......
  • CH582 CH573 CH579 CH32F/V208 HID 增加连接间隔状态回调函数
    在peripheral例子里面其实是有连接参数更新状态回调,主要是连接间隔和连接超时时间握手后的结果在HID例子添加只要在一个文件(以HIDKeyboard为例子,在hidkbd.c里面修改)里面修......
  • Java 给Word不同页面设置不同背景
    Word文档中,可直接通过【设计】-【页面颜色】页面颜色,通过Java代码可参考如下设置方法:1.设置单一颜色背景doc.getBackground().setType(BackgroundType.Color);doc.getBackg......
  • vue打印部分页面
    方法一、在项目中安装插件vue-print-nbnpminstallvue-print-nb--save在main.js中引入importPrintfrom'vue-print-nb'//打印Vue.use(Print)使用//点击打印......
  • 低代码如何构建响应式布局前端页面
    “你开发的界面为啥在我的屏幕里这么小啊?”“这个界面为啥在我这里会出现横向滚动条啊?”大家在进行前端界面开发时,有没有遇到这些类似的问题呢?又是如何解决的呢?页面响应......
  • 1月3日内容总结——bbs项目登陆页面和主页
    目录一、登陆功能完善验证码功能实现单机验证码实现验证码刷新(局部刷新)点击登陆提交数据进行校验二、主页搭建html代码views.py代码分页器主页内容部分官网提供作业一、......