解决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的划词搜索实现(备忘)
Sep 14 Javascript
js实现右下角可关闭最小化div(可用于展示推荐内容)
Jun 24 Javascript
JavaScript截取、切割字符串的技巧
Jan 07 Javascript
深入理解JavaScript中的call、apply、bind方法的区别
May 30 Javascript
深入了解JavaScript的逻辑运算符(与、或)
Dec 20 Javascript
快速掌握jQuery插件开发
Jan 19 Javascript
javascript中的面向对象
Mar 30 Javascript
vue-cli配置环境变量的方法
Jul 09 Javascript
vue 进阶之实现父子组件间的传值
Apr 26 Javascript
js设计模式之代理模式及订阅发布模式实例详解
Aug 15 Javascript
package.json各个属性说明详解
Mar 11 Javascript
javascript实现固定侧边栏
Feb 09 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
php email邮箱正则
2008/10/08 PHP
PHP 编写大型网站问题集
2010/05/07 PHP
PHP安全技术之 实现php基本安全
2010/09/04 PHP
探讨:php中在foreach中使用foreach ($arr as &amp;$value) 这种类型的解释
2013/06/24 PHP
thinkphp中html:list标签传递多个参数实例
2014/10/30 PHP
php实现简单的语法高亮函数实例分析
2015/04/27 PHP
360搜索引擎自动收录php改写方案
2018/04/28 PHP
简单JS代码压缩器
2006/10/12 Javascript
用javascript获取地址栏参数
2006/12/22 Javascript
jquery 实现的全选和反选
2009/04/15 Javascript
JS获取select的value和text值的简单实例
2014/02/26 Javascript
绑定回车enter事件代码
2014/05/18 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
2015/02/13 Javascript
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
2015/06/05 Javascript
jQuery实现查找最近父节点的方法
2016/06/23 Javascript
jquery插件uploadify多图上传功能实现代码
2016/08/12 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
2016/11/21 Javascript
JS实现超简单的汉字转拼音功能示例
2016/12/22 Javascript
JS实现图片居中悬浮效果
2017/12/25 Javascript
npm 更改默认全局路径以及国内镜像的方法
2018/05/16 Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
2018/06/14 jQuery
JavaScript事件对象event用法分析
2018/07/27 Javascript
微信小程序Echarts覆盖正常组件问题解决
2019/07/13 Javascript
解决uWSGI的编码问题详解
2017/03/24 Python
对tensorflow中tf.nn.conv1d和layers.conv1d的区别详解
2020/02/11 Python
opencv中图像叠加/图像融合/按位操作的实现
2020/04/01 Python
python连接手机自动搜集蚂蚁森林能量的实现代码
2021/02/24 Python
Hanro官网:奢华男士和女士内衣、睡衣和家居服
2018/10/25 全球购物
高中的自我鉴定
2013/12/16 职场文书
校园安全检查制度
2014/02/03 职场文书
就业推荐表导师评语
2014/12/31 职场文书
2016初一新生军训心得体会
2016/01/11 职场文书
2016中学教师读书心得体会
2016/01/13 职场文书
教你怎么用Python监控愉客行车程
2021/04/29 Python
python turtle绘图命令及案例
2021/11/23 Python
Ruby处理YAML和json数据
2022/04/18 Ruby