解决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 相关文章推荐
JavaScript 内置对象属性及方法集合
Jul 04 Javascript
表单切换,用回车键替换Tab健(不支持IE)
Jul 20 Javascript
js获取图片大小的函数代码
Sep 20 Javascript
标题过长使用javascript按字节截取字符串
Apr 24 Javascript
基于javascript实现句子翻牌网页版小游戏
Mar 23 Javascript
Web纯前端“旭日图”实现元素周期表
Mar 10 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
Mar 25 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
Apr 24 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
vue组件创建的三种方式小结
Feb 03 Javascript
vue 使用 canvas 实现手写电子签名
Mar 06 Javascript
vue整合百度地图显示指定地点信息
Apr 06 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简单统计在线人数的方法
2016/05/10 PHP
PHP将身份证正反面两张照片合成一张图片的代码
2017/04/08 PHP
postman的安装与使用方法(模拟Get和Post请求)
2018/08/06 PHP
Laravel框架查询构造器 CURD操作示例
2019/09/04 PHP
Yii2.0框架behaviors方法使用实例分析
2019/09/30 PHP
项目实践之javascript技巧
2007/12/06 Javascript
JavaScript中:表达式和语句的区别[译]
2012/09/17 Javascript
JQuery设置文本框和密码框得到焦点时的样式
2013/08/30 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
2014/06/15 Javascript
js实现网页随机切换背景图片的方法
2014/11/01 Javascript
jQuery中:eq()选择器用法实例
2014/12/29 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
2015/02/28 Javascript
javascript 使用for循环时该注意的问题-附问题总结
2015/08/19 Javascript
轻松学习Javascript闭包函数
2015/12/15 Javascript
javascript HTML5 canvas实现打砖块游戏
2020/06/18 Javascript
简单实现js点击展开二级菜单功能
2017/05/16 Javascript
JS实现批量上传文件并显示进度功能
2017/06/27 Javascript
bootstrap table sum总数量统计实现方法
2017/10/29 Javascript
基于element-ui组件手动实现单选和上传功能
2018/12/06 Javascript
微信小程序登录session的使用
2019/03/17 Javascript
在vue中使用G2图表的示例代码
2019/03/19 Javascript
python的类方法和静态方法
2014/12/13 Python
Python 爬取携程所有机票的实例代码
2018/06/11 Python
对python以16进制打印字节数组的方法详解
2019/01/24 Python
python中对_init_的理解及实例解析
2019/10/11 Python
复化梯形求积分实例——用Python进行数值计算
2019/11/20 Python
pandas实现将日期转换成timestamp
2019/12/07 Python
python GUI库图形界面开发之PyQt5打印控件QPrinter详细使用方法与实例
2020/02/28 Python
美国地毯购买网站:Rugs USA
2019/02/23 全球购物
外语专业毕业生自荐信
2014/04/14 职场文书
中学生评语大全
2014/04/18 职场文书
师德师风承诺书
2014/05/23 职场文书
2014预备党员党课学习心得范文
2014/07/08 职场文书
狂人日记读书笔记
2015/06/30 职场文书
安全责任协议书范本
2016/03/23 职场文书
Redis基本数据类型哈希Hash常用操作命令
2022/06/01 Redis