解决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 相关文章推荐
DWZ刷新dialog解决方法
Mar 03 Javascript
解析jQuery与其它js(Prototype)库兼容共存
Jul 04 Javascript
jquery实现可拖拽弹出层特效
Jan 04 Javascript
JavaScript实现函数返回多个值的方法
Jun 09 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
Jun 12 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
Jun 20 Javascript
js注入 黑客之路必备!
Sep 14 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
基于Vue实现图书管理功能
Oct 17 Javascript
JS实现瀑布流布局
Oct 21 Javascript
echarts整合多个类似option的方法实例
Jul 10 Javascript
微信小程序商品详情页底部弹出框
Nov 22 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
我常用的几个类
2006/10/09 PHP
简单的PHP图片上传程序
2008/03/27 PHP
PHP模拟http请求的方法详解
2016/11/09 PHP
PHP实现页面静态化深入讲解
2021/03/04 PHP
向fckeditor编辑器插入指定代码的方法
2007/05/25 Javascript
Javascript学习笔记一 之 数据类型
2010/12/15 Javascript
JavaScript字符串常用的方法
2016/03/10 Javascript
AngularJS轻松实现双击排序的功能
2016/08/30 Javascript
jQuery设计思想
2017/03/07 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
2018/08/08 Javascript
Vue+Element实现动态生成新表单并添加验证功能
2019/05/23 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
2019/10/16 Javascript
Vue 禁用浏览器的前进后退操作
2020/09/04 Javascript
vue中配置scss全局变量的步骤
2020/12/28 Vue.js
Python中按值来获取指定的键
2019/03/04 Python
Python如何通过百度翻译API实现翻译功能
2020/04/02 Python
解析Python 偏函数用法全方位实现
2020/06/26 Python
pandas针对excel处理的实现
2021/01/15 Python
python爬虫爬取某网站视频的示例代码
2021/02/20 Python
CSS3 Columns分列式布局方法简介
2014/05/03 HTML / CSS
html5实现图片转圈的动画效果——让页面动起来
2017/10/16 HTML / CSS
澳洲的服装老品牌:SABA
2018/02/06 全球购物
GAZMAN官网:澳大利亚领先的男装品牌
2019/12/19 全球购物
SQL Server数据库笔试题和答案
2016/02/04 面试题
饭店工作计划书
2014/01/10 职场文书
医校毕业生自我鉴定
2014/01/25 职场文书
旅游管理毕业生自荐书
2014/02/02 职场文书
晨会主持词
2014/03/17 职场文书
党员对照检查材料整改措施思想汇报
2014/09/26 职场文书
教师批评与自我批评发言稿
2014/10/15 职场文书
2014小学一年级班主任工作总结
2014/12/05 职场文书
田径运动会通讯稿
2015/07/18 职场文书
2019年最新借条范本!
2019/07/08 职场文书
Docker 镜像介绍以及commit相关操作
2022/04/13 Servers
springboot读取nacos配置文件
2022/05/20 Java/Android
python绘制云雨图raincloud plot
2022/08/05 Python