解决IOS端微信H5页面软键盘弹起后页面下方留白的问题


Posted in Javascript onJune 05, 2019

前言:微信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);
    }
   }

总结

以上所述是小编给大家介绍的解决IOS端微信H5页面软键盘弹起后页面下方留白的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js+FSO遍历文件夹下文件并显示
Mar 07 Javascript
在JavaScript中获取请求的URL参数
Dec 22 Javascript
修复ie8&amp;chrome下window的resize事件多次执行
Oct 20 Javascript
jQuery中$.fn的用法示例介绍
Nov 05 Javascript
一个奇葩的最短的 IE 版本判断JS脚本
May 28 Javascript
浅谈js中的in-for循环
Jun 28 Javascript
JS数组操作之增删改查的简单实现
Aug 21 Javascript
vue如何根据网站路由判断页面主题色详解
Nov 02 Javascript
Vue.js的动态组件模板的实现
Nov 26 Javascript
JavaScript设计模式之装饰者模式实例详解
Jan 17 Javascript
4 种滚动吸顶实现方式的比较
Apr 09 Javascript
js实现圆形菜单选择器
Dec 03 Javascript
详解vue父子组件关于模态框状态的绑定方案
Jun 05 #Javascript
JS中实现浅拷贝和深拷贝的代码详解
Jun 05 #Javascript
优雅的处理vue项目异常实战记录
Jun 05 #Javascript
原生JS使用Canvas实现拖拽式绘图功能
Jun 05 #Javascript
Node.js 路由的实现方法
Jun 05 #Javascript
JS实现动态添加外部js、css到head标签的方法
Jun 05 #Javascript
JS函数动态传递参数的方法分析【基于arguments对象】
Jun 05 #Javascript
You might like
生成缩略图
2006/10/09 PHP
一个php作的文本留言本的例子(一)
2006/10/09 PHP
PHP输入流php://input介绍
2012/09/18 PHP
探讨:如何使用PhpDocumentor生成文档
2013/06/25 PHP
php获取百度收录、百度热词及百度快照的方法
2015/04/02 PHP
JQuery文本框高亮显示插件代码
2011/04/02 Javascript
json对象转字符串如何实现
2012/12/02 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
2015/01/26 Javascript
深入理解(function(){... })();
2016/08/16 Javascript
jQuery简单实现中间浮窗效果
2016/09/04 Javascript
jQuery表单对象属性过滤选择器实例详解
2016/09/13 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
2016/09/14 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
2017/02/17 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
2017/04/10 jQuery
简单谈谈vue的过渡动画(推荐)
2017/10/11 Javascript
vue+webpack实现异步加载三种用法示例详解
2018/04/24 Javascript
JavaScript对象的特性与实践应用深入详解
2018/12/30 Javascript
巧妙运用v-model实现父子组件传值的方法示例
2019/04/07 Javascript
小程序api实现promise封装过程解析
2019/11/21 Javascript
Node.js API详解之 dns模块用法实例分析
2020/05/15 Javascript
[01:28:44]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第一场 1月10日
2021/03/11 DOTA
Python代码解决RenderView窗口not found问题
2016/08/28 Python
python使用mysql的两种使用方式
2018/03/07 Python
解决Tensorflow 使用时cpu编译不支持警告的问题
2020/02/03 Python
关于python中的xpath解析定位
2020/03/06 Python
Pycharm中配置远程Docker运行环境的教程图解
2020/06/11 Python
使用Python将xmind脑图转成excel用例的实现代码(一)
2020/10/12 Python
Matplotlib中rcParams使用方法
2021/01/05 Python
世界上最值得信赖的多日游在线市场:TourRadar
2018/07/20 全球购物
英国剑桥包中文官网:The Cambridge Satchel Company中国
2018/11/06 全球购物
LightInTheBox法国站:中国跨境电商
2020/03/05 全球购物
如何将无状态会话Bean发布为WEB服务,只有无状态会话Bean可以发布为WEB服务?
2015/12/03 面试题
模范教师事迹材料
2014/12/16 职场文书
高三生物教学反思
2016/02/22 职场文书
常用的MongoDB查询语句的示例代码
2021/07/25 MongoDB
Java后台生成图片的完整步骤
2021/08/04 Java/Android