解决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 相关文章推荐
使用JQUERY Tabs插件宿主IFRAMES
Jan 01 Javascript
最常用的12种设计模式小结
Aug 09 Javascript
open 动态修改img的onclick事件示例代码
Nov 13 Javascript
JavaScript获取路径设计源码
May 22 Javascript
JavaScript中this详解
Sep 01 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
Jan 04 Javascript
Javascript中浏览器窗口的基本操作总结
Aug 18 Javascript
jsp 网站引入外部css或者js失效问题解决
Oct 31 Javascript
微信小程序 后台登录(非微信账号)实例详解
Mar 31 Javascript
微信小程序表单验证功能完整实例
Dec 01 Javascript
微信小程序如何自定义table组件
Jun 29 Javascript
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 Vue.js
详解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
php网站来路获取代码(针对搜索引擎)
2010/06/08 PHP
关于zend studio 出现乱码问题的总结
2013/06/23 PHP
使用php判断服务器是否支持Gzip压缩功能
2013/09/24 PHP
Thinkphp连表查询及数据导出方法示例
2016/10/15 PHP
php设计模式之代理模式分析【星际争霸游戏案例】
2020/03/23 PHP
打造基于jQuery的高性能TreeView(asp.net)
2011/02/23 Javascript
Ajax 数据请求的简单分析
2011/04/05 Javascript
js实现省市联动效果的简单实例
2014/02/10 Javascript
jQuery显示和隐藏 常用的状态判断方法
2015/01/29 Javascript
微信小程序 textarea 详解及简单使用方法
2016/12/05 Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
2017/01/21 Javascript
微信小程序实现YDUI的ScrollNav组件
2018/02/02 Javascript
Vue利用canvas实现移动端手写板的方法
2018/05/03 Javascript
Vue 全局loading组件实例详解
2018/05/29 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
2018/09/10 Javascript
详解如何webpack使用DllPlugin
2018/09/30 Javascript
js实现网页同时进行多个倒计时功能
2019/02/25 Javascript
微信小程序云开发之使用云函数
2019/05/17 Javascript
jquery实现上传文件进度条
2020/03/26 jQuery
javascript利用canvas实现鼠标拖拽功能
2020/07/23 Javascript
js调用网络摄像头的方法
2020/12/05 Javascript
Python实现MySQL操作的方法小结【安装,连接,增删改查等】
2017/07/12 Python
浅析Python中return和finally共同挖的坑
2017/08/18 Python
python实现简单遗传算法
2018/03/19 Python
python 爬虫 实现增量去重和定时爬取实例
2020/02/28 Python
如何使用Cython对python代码进行加密
2020/07/08 Python
用python给csv里的数据排序的具体代码
2020/07/17 Python
Python TestSuite生成测试报告过程解析
2020/07/23 Python
Farfetch美国:奢侈品牌时尚购物平台
2019/05/02 全球购物
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/01/13 面试题
地理科学专业毕业生求职信
2013/10/15 职场文书
幼儿园运动会加油词
2014/02/14 职场文书
公司活动总结范文
2014/07/01 职场文书
新郎新娘致辞
2015/07/31 职场文书
Java使用jmeter进行压力测试
2021/07/09 Java/Android
JavaScript前端面试扁平数据转tree与tree数据扁平化
2022/06/14 Javascript