解决微信H5页面软键盘弹起后页面下方留白的问题(iOS端)
前言:微信H5项目,ios端出现了软键盘输完隐藏后页面不会回弹,下方会有一大块留白
最近微信和ios都有版本升级,不知道是哪边升级造成的,但是经过测试,软键盘收起后,再滚动一下页面,下面的留白就会消失。所以只要在输入完毕后模拟一下这个“滚动”的操作,就能解决问题了。
如果是用vue写的:
<input type="text" @blur="fixScroll" placeholder="请输入xxx"/> //methods中添加: fixScroll() { window.scrollTo(0, 0); }
因为这个问题只在iOS端出现所以使用前进行一下判断:
fixScroll() { let u = navigator.userAgent; let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 if (isiOS) { window.scrollTo(0, 0); } }
大功告成
解决微信H5页面软键盘弹起后页面下方留白的问题(iOS端)的更多相关文章
- Layman 解决MUI 软键盘弹起挤压页面问题
问题:在使用mui和H5+进行移动端开发的时候,经常会遇见需要用户输入的情况 当input获取焦点弹起软键盘的时候,经常会遇见软键盘挤压页面.软键盘遮挡输入框等一系列问题: 原因:造成这种现象的原因是 ...
- vue H5页面在微信浏览器打开软键盘关闭导致页面空缺的问题。
methods:{ inputBlur () { // window.scroll(0, 0); setTimeout(() => { // alert(1); if (document.act ...
- H5微信页面开发 IOS系统 input输入框失去焦点,软键盘关闭后,被撑起的页面无法回退到原来正常的位置,导致弹框里的按钮响应区域错位
H5微信页面开发,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦,软键盘收起后,页面未恢复,导致弹框里的按钮响应区域错位. 解决方案:给输入框(或select选择框)添加失去焦点的 ...
- IOS微信6.7.4输入框失去焦点,软键盘关闭后,被撑起的页面无法回退到原来正常的位置
近期在开发微信H5页面时碰到这个问题,如图,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦,软键盘收起后,页面未恢复,这也是ios的微信版本更新6.7.4之后才遇到的bug. 目前 ...
- input输入框失去焦点,软键盘关闭后,滚动的页面无法恢复到原来位置
H5微信页面开发,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦,软键盘收起后,页面未恢复,导致弹框里的按钮响应区域错位. 解决方案:给输入框(或select选择框)添加失去焦点的 ...
- h5 移动端 监听软键盘弹起、收起
前面一篇博客 h5 安卓 键盘弹起界面适配 修改webview高度提到了在adnroid中如何监听软键盘的弹起与收起,是利用的窗口的高度发生变化window.onresize事件来做突破点的,但是io ...
- H5软键盘弹起收回(IOS与Android)
IOS下中,软键盘处于窗口最顶层,与原有的窗口不冲突,所以底部导航条不会被顶起,但是在android下,软键盘与窗口处于同一层,所以当软键盘弹起时,当前窗口缩小,那么窗口内容自然要被挤: 解决办法: ...
- uni-app 在input获取焦点(弹出软键盘后收起软键盘),页面不下滑,留下下方空白
加入收起软键盘时让页面回正 uni.pageScrollTo({ scrollTop: 0, duration: 0 });
- Android之监听手机软键盘弹起与关闭
背景: 在很多App开发过程中需要在Activity中监听Android设备的软键盘弹起与关闭,但是Android似乎没有提供相关的的监听API给我们来调用,本文提供了一个可行的办法来监听软键盘的弹起 ...
随机推荐
- Gym - 101670H Go Northwest!(CTU Open Contest 2017 思维题+map)
题目: Go Northwest! is a game usually played in the park main hall when occasional rainy weather disco ...
- Linux终端中的字符串使用总结(截取,切片,查找替换,转换,变量赋值等)
1.基于模式匹配截取字符串 1.#.##号截取 #号截取,从左边开始,以一个出现的分隔符(最左)为准,删除左边字符. ##号截取,从左边开始,以最后(最右)一个分隔符为准,删除左边字符. str='h ...
- 类与类之间的关系UML模型图
关联.依赖.聚合.组合.泛化.实现 类之间可能存在以下几种关系:关联(association).依赖(dependency).聚合(Aggregation,也有的称聚集).组合(Composition ...
- Nginx配置 隐藏入口文件index.php
Nginx配置文件里放入这段代码 server { location / { index index.php index.html index.htm l.php; autoindex on; if ...
- LINUX驱动、系统底层
就业模拟测试题-LINUX驱动.系统底层工程师职位 本试卷从考试酷examcoo网站导出,文件格式为mht,请用WORD/WPS打开,并另存为doc/docx格式后再使用 试卷编号:143921试卷录 ...
- 【模板】51nod 1051 最大子矩阵和
[题解] 二重循环枚举起始列和终止列,竖着往下加,转化为一个最大子段和问题,逐行累加即可. #include<cstdio> #include<cstring> #includ ...
- JavaScript保留关键字(全)
JavaScript 标准 所有的现代浏览器已经完全支持 ES5(ECMAScript 5). JavaScript 保留关键字(keyword) Javascript 的保留关键字(标识符)不可以用 ...
- JavaSE 学习笔记之IO流(二十二)
IO流:用于处理设备上数据. 流:可以理解数据的流动,就是一个数据流.IO流最终要以对象来体现,对象都存在IO包中. 流也进行分类: 1:输入流(读)和输出流(写). 2:因为处理的数据不同,分为字节 ...
- noip模拟赛 运
[问题背景]zhx 和妹子们玩数数游戏.[问题描述]仅包含 4 或 7 的数被称为幸运数.一个序列的子序列被定义为从序列中删去若干个数, 剩下的数组成的新序列.两个子序列被定义为不同的当且仅当其中的元 ...
- 【Chrome】Chrome浏览器怎么查看版本信息
第一步,打开Chrome浏览器 第二步,弹出浏览器主界面 第三步,点击右上按钮(三横杠) 第四步,下拉中选择“关于” 第五步,弹出窗口,可以看到版本信息 第二种方法: 第六步,也可以通过地址栏里输入命 ...