解决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实现读取txt文档的脚本
Jul 20 Javascript
对采用动态原型方式无法展示继承机制得思考
Dec 04 Javascript
onclick与listeners的执行先后问题详细解剖
Jan 07 Javascript
20行代码实现的一个CSS覆盖率测试脚本
Jul 07 Javascript
jquery实现页面常用的返回顶部效果
Mar 04 Javascript
jquery简单插件制作(fn.extend)完整实例
May 24 Javascript
使用JavaScript实现弹出层效果的简单实例
May 31 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
vue实现全选和反选功能
Aug 31 Javascript
Node中使用ES6语法的基础教程
Jan 05 Javascript
微信小程序实现吸顶效果
Jan 08 Javascript
关于React Native 无法链接模拟器的问题
Jun 21 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 $_SESSION会员登录实例分享
2021/01/19 PHP
thinkPHP5.0框架简单配置作用域的方法
2017/03/17 PHP
JavaScript 函数调用规则
2009/09/14 Javascript
js过滤HTML标签以及空格的思路及代码
2013/05/24 Javascript
javascript页面动态显示时间变化示例代码
2013/12/18 Javascript
document.addEventListener使用介绍
2014/03/07 Javascript
七个很有意思的PHP函数
2014/05/12 Javascript
JavaScript获取元素尺寸和大小操作总结
2015/02/27 Javascript
javascript实现支持移动设备画廊
2015/08/24 Javascript
理解js回收机制通俗易懂版
2016/02/29 Javascript
AngularJS 支付倒计时功能实现思路
2017/06/05 Javascript
Node.js中sequelize时区的配置方法
2017/12/10 Javascript
浅析Vue项目中使用keep-Alive步骤
2018/07/27 Javascript
VUE-cli3使用 svg-sprite-loader
2018/10/20 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
2019/01/19 Javascript
vue.js iview打包上线后字体图标不显示解决办法
2020/01/20 Javascript
详解element上传组件before-remove钩子问题解决
2020/04/08 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
2020/04/10 Javascript
python处理cookie详解
2014/02/07 Python
Python中type的构造函数参数含义说明
2015/06/21 Python
Python中urllib+urllib2+cookielib模块编写爬虫实战
2016/01/20 Python
Python Numpy 数组的初始化和基本操作
2018/03/13 Python
基于python实现聊天室程序
2018/07/27 Python
pytorch查看模型weight与grad方式
2020/06/24 Python
利于python脚本编写可视化nmap和masscan的方法
2020/12/29 Python
Python爬虫获取op.gg英雄联盟英雄对位胜率的源码
2021/01/29 Python
CSS3实现缺角矩形,折角矩形以及缺角边框
2019/12/20 HTML / CSS
解析HTML5中的新功能本地存储localStorage
2016/03/01 HTML / CSS
美国知名的百货清仓店:Neiman Marcus Last Call
2016/08/03 全球购物
母校寄语大全
2014/04/10 职场文书
老员工辞职信范文
2015/05/12 职场文书
新闻发布会新闻稿
2015/07/17 职场文书
2015年小学总务工作总结
2015/07/21 职场文书
SQL Server的存储过程与触发器以及系统函数和自定义函数
2022/04/10 SQL Server
索尼ICF-5900W收音机测评
2022/04/24 无线电
Python实现双向链表基本操作
2022/05/25 Python