解决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 相关文章推荐
取得传值的函数
Oct 27 Javascript
ajax中get和post的说明及使用与区别
Dec 23 Javascript
js+数组实现网页上显示时间/星期几的实用方法
Jan 18 Javascript
Visual Studio中js调试的方法图解
Jun 30 Javascript
用console.table()调试javascript
Sep 04 Javascript
JavaScript异步加载浅析
Dec 28 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
Jan 18 Javascript
浅析JS获取url中的参数实例代码
Jun 14 Javascript
AngularJS入门教程之控制器详解
Jul 27 Javascript
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
JS 设计模式之:工厂模式定义与实现方法浅析
May 06 Javascript
JQuery插件tablesorter表格排序实现过程解析
May 28 jQuery
详解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语法(4)
2006/10/09 PHP
PHP5中新增stdClass 内部保留类
2011/06/13 PHP
php通过正则表达式记取数据来读取xml的方法
2015/03/09 PHP
在WordPress的后台中添加顶级菜单和子菜单的函数详解
2016/01/11 PHP
thinkPHP批量删除的实现方法分析
2016/11/09 PHP
php批量删除操作代码分享
2017/02/26 PHP
angular简介和其特点介绍
2015/01/29 Javascript
jQuery解决input超多的表单提交
2015/08/10 Javascript
老生常谈JavaScript数组的用法
2016/06/10 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
2016/11/22 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
2017/12/12 Javascript
微信小程序实现的picker多级联动功能示例
2019/05/23 Javascript
[01:07:46]完美世界DOTA2联赛循环赛 Magma vs IO BO2第二场 11.01
2020/11/02 DOTA
Python实现的多线程端口扫描工具分享
2015/01/21 Python
基于Python实现的ID3决策树功能示例
2018/01/02 Python
Python 记录日志的灵活性和可配置性介绍
2018/02/27 Python
Python docx库用法示例分析
2019/02/16 Python
python能开发游戏吗
2020/06/11 Python
python实现xlwt xlrd 指定条件给excel行添加颜色
2020/07/14 Python
Python 绘制可视化折线图
2020/07/22 Python
Linux管理员面试经常问道的相关命令
2013/04/29 面试题
大学毕业感言
2014/01/10 职场文书
晚宴邀请函范文
2014/01/15 职场文书
幼儿园教师辞职信
2014/01/18 职场文书
《美丽的丹顶鹤》教学反思
2014/04/22 职场文书
安全生产大检查方案
2014/05/07 职场文书
酒店员工培训方案
2014/06/02 职场文书
小学生安全责任书
2014/07/25 职场文书
私人委托书格式
2014/09/10 职场文书
面试自我评价范文
2014/09/17 职场文书
迎新生标语大全
2014/10/06 职场文书
大学生学期个人总结
2015/02/12 职场文书
文明旅游倡议书
2015/04/28 职场文书
撤诉申请怎么写
2015/05/19 职场文书
安全教育培训制度
2015/08/06 职场文书
详解Spring Boot使用系统参数表提升系统的灵活性
2021/06/30 Java/Android