解决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编写widget的一些技巧分享
Oct 28 Javascript
一个轻量级的javascript库 pj介绍
Dec 19 Javascript
简单的jquery拖拽排序效果实现代码
Sep 20 Javascript
解决遍历时Array.indexOf产生的性能问题
Jul 03 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
Nov 19 Javascript
javascript中的if语句使用介绍
Nov 20 Javascript
使用jquery实现以post打开新窗口
Mar 19 Javascript
Material(包括Material Icon)在Angular2中的使用详解
Feb 11 Javascript
微信小程序实现页面下拉刷新和上拉加载功能详解
Dec 03 Javascript
微信小程序--特定区域滚动到顶部时固定的方法
Apr 28 Javascript
javascript canvas API内容整理
Feb 16 Javascript
Vue 打包后相对路径的引用问题
Jun 05 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
做个自己站内搜索引擎
2006/10/09 PHP
php设计模式 Command(命令模式)
2011/06/26 PHP
PHP 字符串长度判断效率更高的方法
2014/03/02 PHP
php简单的上传类分享
2016/05/15 PHP
laravel5.6框架操作数据curd写法(查询构建器)实例分析
2020/01/26 PHP
Ext 表单布局实例代码
2009/04/30 Javascript
用Javascript实现锚点(Anchor)间平滑跳转
2009/09/08 Javascript
基于jquery 的一个progressbar widge
2010/10/29 Javascript
一些有用的JavaScript和jQuery的片段分享
2011/08/23 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
2013/04/24 Javascript
Bootstrap组件(一)之菜单
2016/05/11 Javascript
浅谈JavaScript的push(),pop(),concat()方法
2016/06/03 Javascript
概述javascript在Google IE中的调试技巧
2016/11/24 Javascript
Bootstrap选项卡动态切换效果
2016/11/28 Javascript
vue2.0父子组件间通信的实现方法
2017/04/19 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
2017/10/19 Javascript
如何在微信小程序中使用骨架屏的步骤
2020/06/12 Javascript
原生js实现放大镜组件
2021/01/22 Javascript
python实现多线程暴力破解登陆路由器功能代码分享
2015/01/04 Python
Python操作MySQL数据库9个实用实例
2015/12/11 Python
python一键升级所有pip package的方法
2017/01/16 Python
Python机器学习之SVM支持向量机
2017/12/27 Python
详解小白之KMP算法及python实现
2019/04/04 Python
pygame库实现移动底座弹球小游戏
2020/04/14 Python
Python如何用wx模块创建文本编辑器
2020/06/07 Python
西尔斯百货官网:Sears
2016/09/06 全球购物
Watch Station官方网站:世界一流的手表和智能手表
2020/01/05 全球购物
优秀研究生自我鉴定
2013/12/04 职场文书
上学迟到的检讨书
2014/01/11 职场文书
一岗双责责任书
2014/04/15 职场文书
程序员求职信
2014/04/16 职场文书
2014年社区宣传工作总结
2014/12/02 职场文书
2015年感恩节活动总结
2015/03/24 职场文书
酒店采购员岗位职责
2015/04/03 职场文书
退休教师欢送会致辞
2015/07/31 职场文书
ubuntu下常用apt命令介绍
2022/06/05 Servers