解决微信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给我们来调用,本文提供了一个可行的办法来监听软键盘的弹起 ...
随机推荐
- UVA - 208 Firetruck(并查集+dfs)
题目: 给出一个结点d和一个无向图中所有的边,按字典序输出这个无向图中所有从1到d的路径. 思路: 1.看到紫书上的提示,如果不预先判断结点1是否能直接到达结点d,上来就直接dfs搜索的话会超时,于是 ...
- 魂酥的LNOI2019滚粗记
$Day -???$ 高一下终于开始了 在开学文化课考试的水题之下混了个(成绩)前排 于是我便油然而生一种自信 我!要!进!省!队! 讲句真话我这么想的时候连自己都觉得自己是个十足的沙雕 我又不是zw ...
- mysql数据库主从操作记录
master数据库已投入生产一段时间后,做主从复制的操作记录 环境: master库:172.18.237.13slave库:172.18.237.14 mysql版本说明: master:mysql ...
- linux ltrace-跟踪进程调用库函数的情况
当前位置:硬件 | 监测 | 内核 | Shell / 性能监测与优化 /ltrace ltrace命令是用来跟踪进程调用库函数的情况. 语法 ltrace [option ...] [command ...
- CF441D
题目大意 给出一个有n个数的序列 求符合 区间各数或起来的数大于区间最大数 的区间的个数 题解 预处理出每个数每一位是0的那位左边最近的1和右边最近的1,用单调栈找出每个最大值所在的区间的左右端点,统 ...
- ssh整合配置文件------web.xml配置
<?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="http://w ...
- 常见的HTTP状态码(HTTP Status Code)
HTTP状态码 当使用浏览器访问一个网页时,浏览器会向网页所在服务器发出请求.当浏览器接收并显示网页前,此网页所在的服务器会返回一个包含HTTP状态码的信息头(server header)用以响应浏览 ...
- Mybatis在Spring环境下的启动顺序
主要看三个类: mybatis-spring-1.2.2.jar包 -> org.mybatis.spring.SqlSessionFactoryBean mybatis-3.2.6.jar包 ...
- Azure Event hub usage
1. create event hub on azure watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/40 ...
- MVC模式利用xib文件定制collectionCell
数据来源于豆瓣网~仅供学习交流~ 本实例练习用到了SDWebImage框架:实现从网络端下载图片的功能 下载地址:https://github.com/rs/SDWebImage 实现效果及框架: x ...