解决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基础之查找元素的详细介绍(访问节点)
Jul 05 Javascript
删除节点的jquery代码
Jan 13 Javascript
javascript去除空格方法小结
May 21 Javascript
JavaScript运算符小结
Jun 03 Javascript
JavaScript的模块化开发框架Sea.js上手指南
May 12 Javascript
微信小程序 弹框和模态框实现代码
Mar 10 Javascript
js判断是否是手机页面
Mar 17 Javascript
JavaScript实现选中文字提示新浪微博分享效果
Jun 15 Javascript
微信小程序画布圆形进度条显示效果
Nov 17 Javascript
webstrom Debug 调试vue项目的方法步骤
Jul 17 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
Apr 24 Javascript
Vue移动端项目实现使用手机预览调试操作
Jul 18 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
全国FM电台频率大全 - 20 广西省
2020/03/11 无线电
Zend Studio 实用快捷键一览表(精心整理)
2013/08/10 PHP
yii实现创建验证码实例解析
2014/07/31 PHP
phpstorm配置Xdebug进行调试PHP教程
2014/12/01 PHP
php+xml实现在线英文词典之添加词条的方法
2015/01/23 PHP
PHP实现中文圆形印章特效
2015/06/19 PHP
Symfony2学习笔记之模板用法详解
2016/03/17 PHP
详解thinkphp实现excel数据的导入导出(附完整案例)
2016/12/29 PHP
javascript-简单的计算器实现步骤分解(附图)
2013/05/30 Javascript
10分钟学会写Jquery插件实例教程
2014/09/06 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
2015/05/12 Javascript
JS模拟并美化的表单控件完整实例
2015/08/19 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
2016/01/15 Javascript
详解js实现线段交点的三种算法
2016/08/09 Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
2017/05/17 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
2018/08/13 Javascript
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
2018/09/18 Javascript
javascript事件循环event loop的简单模型解释与应用分析
2020/03/14 Javascript
angula中使用iframe点击后不执行变更检测的问题
2020/05/10 Javascript
JavaScript 中的执行上下文和执行栈实例讲解
2021/02/25 Javascript
[46:43]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第三局
2016/02/28 DOTA
python实现的防DDoS脚本
2011/02/08 Python
python登录豆瓣并发帖的方法
2015/07/08 Python
Django接受前端数据的几种方法总结
2016/11/04 Python
使用Python写CUDA程序的方法
2017/03/27 Python
详解Python计算机视觉 图像扭曲(仿射扭曲)
2019/03/27 Python
Python实现AI自动抠图实例解析
2020/03/05 Python
大学生毕业求职找工作的自我评价
2013/09/29 职场文书
养殖人员的创业计划书范文
2013/12/26 职场文书
荆州古城导游词
2015/02/06 职场文书
2015年化工厂工作总结
2015/05/04 职场文书
小学音乐课教学反思
2016/02/18 职场文书
幼儿园中班教学反思
2016/03/03 职场文书
强烈推荐:小学生:暑假作息时间表(值得收藏)
2019/07/09 职场文书
保安辞职申请书应该怎么写?
2019/07/15 职场文书
mysql使用instr达到in(字符串)的效果
2022/04/03 MySQL