解决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 相关文章推荐
比较简单的一个符合web标准的JS调用flash方法
Nov 29 Javascript
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
Mar 12 Javascript
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
Jan 08 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
Dec 11 Javascript
jquery validate 自定义验证方法介绍 日期验证
Feb 27 Javascript
JS实现跟随鼠标立体翻转图片的方法
May 04 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
Dec 29 Javascript
浅谈jQuery hover(over, out)事件函数
Dec 03 Javascript
详解jQuery选择器
Dec 21 Javascript
详解webpack介绍&amp;安装&amp;常用命令
Jun 29 Javascript
ES6新特性:使用export和import实现模块化详解
Jul 31 Javascript
js实现随机点名功能
Dec 23 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
对javascript和select部件的结合运用
2006/10/09 PHP
php 缩略图实现函数代码
2011/06/23 PHP
PHP Class&amp;Object -- 解析PHP实现二叉树
2013/06/25 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十四)
2014/06/26 PHP
PHP基于单例模式实现的数据库操作基类
2016/01/15 PHP
PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】
2017/07/03 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
表单的一些基本用法与技巧
2006/07/15 Javascript
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
2007/04/29 Javascript
jQuery .tmpl(), .template()学习资料小结
2011/07/18 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
2012/11/11 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
2014/04/12 Javascript
jQuery+PHP星级评分实现方法
2015/10/02 Javascript
JavaScript位移运算符(无符号) &gt;&gt;&gt; 三个大于号 的使用方法详解
2016/03/31 Javascript
jQuery EasyUI 页面加载等待及页面等待层
2017/02/06 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
2017/07/11 Javascript
angular内置provider之$compileProvider详解
2017/09/27 Javascript
node下使用UglifyJS压缩合并JS文件的方法
2018/03/07 Javascript
Javascript实现购物车功能的详细代码
2018/05/08 Javascript
手把手15分钟搭一个企业级脚手架
2019/09/16 Javascript
如何在vue中使用jointjs过程解析
2020/05/29 Javascript
[01:52]2014DOTA2西雅图邀请赛 V社开大会你不知道的小秘密
2014/07/08 DOTA
详解字典树Trie结构及其Python代码实现
2016/06/03 Python
Python多进程写入同一文件的方法
2019/01/14 Python
python 弹窗提示警告框MessageBox的实例
2019/06/18 Python
matlab中imadjust函数的作用及应用举例
2020/02/27 Python
css3的transform中scale缩放详解
2014/12/08 HTML / CSS
Everything But Water官网:美国泳装品牌
2019/03/17 全球购物
泰国的头号网上婴儿用品店:Motherhood.co.th
2019/04/09 全球购物
奢华时尚的创新平台:Baltini
2020/10/03 全球购物
英文导游欢迎词
2014/01/11 职场文书
关于环保的演讲稿
2014/05/10 职场文书
老公保证书
2015/01/17 职场文书
个人年底工作总结
2015/03/10 职场文书
Requests什么的通通爬不了的Python超强反爬虫方案!
2021/05/20 Python
Python 文字识别
2022/05/11 Python