解决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中的History历史对象
Jan 16 Javascript
Jquery实现仿新浪微博获取文本框能输入的字数代码
Feb 22 Javascript
javascript实现一个数值加法函数
Jun 26 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
Aug 06 Javascript
jQuery插件开发汇总
May 15 Javascript
AngularJS 过滤器的简单实例
Jul 27 Javascript
初学node.js中实现删除用户路由
May 27 Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
Jul 10 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
Feb 11 Javascript
JavaScript Blob对象原理及用法详解
Oct 14 Javascript
解决vue项目axios每次请求session不一致的问题
Oct 24 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 n个不重复的随机数生成代码
2009/06/23 PHP
php google或baidu分页代码
2009/11/26 PHP
PHP多个文件上传到服务器实例
2014/10/29 PHP
PHP云打印类完整示例
2016/10/15 PHP
js 获取中文拼音,Select自动匹配字母获取值的代码
2009/09/23 Javascript
由Javascript实现的页面日历
2011/11/04 Javascript
JS 获取select(多选下拉)中所选值的示例代码
2013/08/02 Javascript
nodejs分页类代码分享
2014/06/17 NodeJs
Javascript 构造函数详解
2014/10/22 Javascript
angularJS 中$scope方法使用指南
2015/02/09 Javascript
跟我学习javascript的prototype使用注意事项
2015/11/17 Javascript
jQuery实现分隔条左右拖动功能
2015/11/21 Javascript
JavaScript鼠标特效大全
2016/09/13 Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
2017/01/24 Javascript
Angularjs 实现动态添加控件功能
2017/05/25 Javascript
代码详解JS操作剪贴板
2018/02/11 Javascript
pm2发布node配置文件ecosystem.json详解
2019/05/15 Javascript
Vue 3.x+axios跨域方案的踩坑指南
2019/07/04 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
2020/04/28 Javascript
vue中destroyed方法的使用说明
2020/07/21 Javascript
Vue 3自定义指令开发的相关总结
2021/01/29 Vue.js
JavaScript事件概念详解(区分静态注册和动态注册)
2021/02/05 Javascript
在Python中处理字符串之isdigit()方法的使用
2015/05/18 Python
Python命令行解析模块详解
2018/02/01 Python
python实现微信自动回复功能
2018/04/11 Python
python日期相关操作实例小结
2019/06/24 Python
详解python中的模块及包导入
2019/08/30 Python
django框架cookie和session用法实例详解
2019/12/10 Python
Python 去除字符串中指定字符串
2020/03/05 Python
python用opencv完成图像分割并进行目标物的提取
2020/05/25 Python
python如何写个俄罗斯方块
2020/11/06 Python
学校拾金不昧表扬信
2015/01/16 职场文书
捐款感谢信
2015/01/20 职场文书
道德与公民自我评价
2015/03/09 职场文书
酒店人事主管岗位职责
2015/04/11 职场文书
基于Python的EasyGUI学习实践
2021/05/07 Python