解决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取得iframe中元素的几种方法
Jul 04 Javascript
jQuery对Select的操作大集合(收藏)
Dec 28 Javascript
jquery处理json数据实例分析
Jun 03 Javascript
JavaScript-RegExp对象只能使用一次问题解决方法
Jun 23 Javascript
jQuery淡入淡出元素让其效果更为生动
Sep 01 Javascript
jQuery实现dialog设置focus焦点的方法
Jun 10 Javascript
基于javascript实现checkbox复选框实例代码
Jan 28 Javascript
JavaScript实现数组降维详解
Jan 05 Javascript
200行代码实现blockchain 区块链实例详解
Mar 14 Javascript
vue 实现全选全不选的示例代码
Mar 29 Javascript
vue-cli脚手架打包静态资源请求出错的原因与解决
Jun 06 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
Sep 06 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
Zerg兵种介绍
2020/03/14 星际争霸
php批量删除数据
2007/01/18 PHP
php 获取远程网页内容的函数
2009/09/08 PHP
md5 16位二进制与32位字符串相互转换示例
2013/12/30 PHP
php像数组一样存取和修改字符串字符
2014/03/21 PHP
php顺序查找和二分查找示例
2014/03/27 PHP
javascript URL锚点取值方法
2009/02/25 Javascript
JavaScript QueryString解析类代码
2010/01/17 Javascript
JavaScript?Apple设备检测示例代码
2013/11/15 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
2014/04/04 Javascript
js控制当再次点击按钮时的间隔时间
2014/06/03 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
2016/05/25 Javascript
深入理解jQuery.data() 的实现方式
2016/11/30 Javascript
详解如何用VUE写一个多用模态框组件模版
2018/09/27 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
2019/07/04 Javascript
layui输入框只允许输入中文且判断长度的例子
2019/09/18 Javascript
React+Redux实现简单的待办事项列表ToDoList
2019/09/29 Javascript
在GitHub Pages上使用Pelican搭建博客的教程
2015/04/25 Python
python 使用get_argument获取url query参数
2017/04/28 Python
django.db.utils.ProgrammingError: (1146, u“Table‘’ doesn’t exist”)问题的解决
2018/07/13 Python
selenium+python 对输入框的输入处理方法
2018/10/11 Python
pandas 数据索引与选取的实现方法
2019/06/21 Python
python 模块导入问题汇总
2021/02/01 Python
英国男女豪华配饰和礼品网站:Black.co.uk
2020/02/28 全球购物
Collection和Collections的区别
2016/05/02 面试题
建筑工程实习自我鉴定
2013/09/19 职场文书
机械加工与数控专业自荐书
2014/06/04 职场文书
爬山的活动方案
2014/08/16 职场文书
绿色环保家庭事迹材料
2014/08/31 职场文书
向女朋友道歉的话
2015/01/20 职场文书
2015年社区关工委工作总结
2015/04/03 职场文书
浙江省杭州市平均工资标准是多少?
2019/07/09 职场文书
浅谈移动端中的视口(viewport)的具体使用
2021/04/13 HTML / CSS
游戏《东方异文石:爱亚利亚黎明》正式版发布
2022/04/03 其他游戏
未发现nvidia显卡怎么办?Win11系统中未检测到nvidia显卡解决教程
2022/04/08 数码科技
Win11如何默认打开软件界面最大化?Win11默认打开软件界面最大化的方法
2022/07/15 数码科技