【快应用】H5网页弹出软键盘后页面没有上移
2023-09-11 14:17:16 时间
现象描述:
使用快应用web组件加载某H5网页时,比如帐号登录、帐号注册等带有输入框的页面,当输入框获取焦点,弹出的软键盘挡住了H5网页的部分内容。
问题代码如下:
问题分析:
1、该问题和web组件的页面布局有关系。
上述template代码中把web作为根节点,软键盘呼出时,没有触发快应用引擎布局的重新计算,导致页面没有上移。
2、另外,需要确认manifest.json文件中windowSoftInputMode的值。
如果不为adjustPan,也会导致页面没有上移。
解决方法:
1、在web组件外套一层div,将div作为根节点。
2、设置manifest.json文件中windowSoftInputMode的值为adjustPan。
欲了解更多更全技术文章,欢迎访问https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh
相关文章
- uni-app - 支付(app支付、小程序支付、h5(微信端)支付)
- h5样式初始化
- 网页基础:网页设计(我所知道的所有的html和css代码(含H5和CSS3)),如有错误请批评指正 wpf Listbox 实现按住ctrl键来取消选中 详解C#的协变和逆变 C#效率优化(1)-- 使用泛型时避免装箱
- 【微信支付】分享一个失败的案例 跨域405(Method Not Allowed)问题 关于IM的一些思考与实践 基于WebSocketSharp 的IM 简单实现 【css3】旋转倒计时 【Html5】-- 塔台管制 H5情景意识 --飞机 谈谈转行
- 微信小程序 - 打开跳转 H5 网页链接(小程序内打开网页)
- 微信公众号 - 禁用 H5 网页长按图片时弹出的菜单(转发给朋友 / 保存到手机 / 收藏 / 搜一搜),苹果安卓系统都可暴力 100% 完美禁用菜单,任何前端框架、任何浏览器都适用的解决方案
- Vue - 最新网页 H5 分享到微信朋友圈 / 转发分享给朋友好友 / 分享到手机 QQ / 分享到 QQ 空间,Vue.js Nuxt.js 通用公众号页面解决方案(超级详细教程)
- uni-app - H5 端获取当前页面的路由和参数(得到当前页面地址的路径 URL)
- uni-app - H5 公众号网页分享到微信朋友圈 / 转发分享给朋友好友 / 分享到手机 QQ / 分享到 QQ 空间,给微信分享卡片设置图标、标题、描述文字等(JS-SDK 通用解决方案放心用)
- uni-app - 最详细 H5 网页接入微信支付功能,提供从详细的示例代码与注释(移动端网页实现微信支付能力,微信公众号前端支付 JSAPI / JS-SDK 详细示例源码)官方最新超级详细教程
- uni-app - 最详细 H5 网页接入微信登录功能,提供公众号配置与详细注释示例代码(移动端网页实现点击登录按钮后 调用微信公众号授权登录功能 详细讲解接入流程与详细示例代码)官方最新超级详细教程
- uniapp - 实现 H5 网站项目路由跳转页面时增加动画效果,给手机移动端网页的所有页面加入跳页动画效果(直接引入核心方法即可全局生效,无需每页都引入,引入一次即可,高效简洁无 BUG)详细解决
- JavaScript - H5 网页拨打电话功能、发送短信、发送邮件(支持 HTML 与 JS 形式)点击自动调起手机拨打并填充手机号
- CSS - H5 页面禁止页面上拉下拉及滚动
- H5响应式设计可以为你网站带来什么?
- 【快应用】H5快应用Web组件打开的网页出现跨域问题如何解决?
- H5快应用国际化
- iOS与H5交互
- H5下拉刷新和上拉加载实现原理浅析
- 常见工作场景解决方案开源库推荐:文件上传库 - uppy、图片处理库 - tui.image-editor、在线文档预览解决方案 - kkFileView、纯前端在线表格/协同编辑解决方案 - Luckysheet、表单设计器 - form-generator / form-render、H5在线网页设计器 - gods-pen / luban-h5
- 【快应用】H5快应用Web组件打开的网页出现跨域问题如何解决?
- H5地理定位获取用户当前位置、城市