解决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 相关文章推荐
超级兔子让浮动层消失的前因后果
Mar 09 Javascript
JavaScript中的类数组对象介绍
Dec 30 Javascript
使用window.prompt()实现弹出用户输入的对话框
Apr 13 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
Jul 17 Javascript
js中利用tagname和id获取元素的方法
Jan 03 Javascript
详解node如何让一个端口同时支持https与http
Jul 04 Javascript
ES6 javascript中class类的get与set用法实例分析
Oct 30 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
Dec 07 Javascript
vue实现商品加减计算总价的实例代码
Aug 12 Javascript
vue中created和mounted的区别浅析
Aug 13 Javascript
浅析js实现网页截图的两种方式
Nov 01 Javascript
JavaScript实现优先级队列
Dec 06 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扩展Xhprof分析项目性能实践教程
2018/09/05 PHP
PHP文件操作实例总结【文件上传、下载、分页】
2018/12/08 PHP
在 IE 中调用 javascript 打开 Excel 表
2006/12/21 Javascript
Prototype使用指南之selector.js
2007/01/10 Javascript
效率高的Javscript字符串替换函数的benchmark
2008/08/02 Javascript
Javascript 判断客户端浏览器类型代码
2010/03/01 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
2015/01/13 Javascript
jQuery中offsetParent()方法用法实例
2015/01/19 Javascript
实现无刷新联动例子汇总
2015/05/20 Javascript
jQuery鼠标事件汇总
2015/08/30 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
2015/10/08 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
2016/08/10 Javascript
拖动时防止选中
2017/02/03 Javascript
javascript简单链式调用案例分析
2017/05/10 Javascript
将angular-ui的分页组件封装成指令的方法详解
2017/05/10 Javascript
MVVM 双向绑定的实现代码
2018/06/21 Javascript
微信小程序定位当前城市的方法
2018/07/19 Javascript
vue-swiper的使用教程
2018/08/30 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
2018/09/03 Javascript
详解vantUI框架在vue项目中的应用踩坑
2018/12/06 Javascript
微信小程序点击列表跳转到对应详情页过程解析
2019/09/26 Javascript
微信小程序点击滚动到指定位置的实现
2020/05/22 Javascript
javascript前端实现多视频上传
2020/12/13 Javascript
Python利用Nagios增加微信报警通知的功能
2016/02/18 Python
Python中的TCP socket写法示例
2018/05/11 Python
修复iPhone的safari浏览器上submit按钮圆角bug
2012/12/24 HTML / CSS
纯CSS3实现地球自转实现代码(图文教程附送源码)
2012/12/26 HTML / CSS
一款纯css3实现的tab选项卡的实列教程
2014/12/11 HTML / CSS
html5 svg 中元素点击事件添加方法
2013/01/16 HTML / CSS
Clarins娇韵诗英国官网:来自法国的天然护肤品牌
2017/04/18 全球购物
伦敦所有西区剧院演出官方票务代理:Theatre Tickets Direct
2017/05/26 全球购物
班组长岗位职责
2014/03/03 职场文书
反四风对照检查材料
2014/09/22 职场文书
2015年法务工作总结范文
2015/05/23 职场文书
Python 数据可视化之Matplotlib详解
2021/11/02 Python
Android超详细讲解组件ScrollView的使用
2022/03/31 Java/Android