前言:微信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);
        }
      }

大功告成

解决微信H5页面软键盘弹起后页面下方留白的问题(iOS端)的更多相关文章

  1. Layman 解决MUI 软键盘弹起挤压页面问题

    问题:在使用mui和H5+进行移动端开发的时候,经常会遇见需要用户输入的情况 当input获取焦点弹起软键盘的时候,经常会遇见软键盘挤压页面.软键盘遮挡输入框等一系列问题: 原因:造成这种现象的原因是 ...

  2. vue H5页面在微信浏览器打开软键盘关闭导致页面空缺的问题。

    methods:{ inputBlur () { // window.scroll(0, 0); setTimeout(() => { // alert(1); if (document.act ...

  3. H5微信页面开发 IOS系统 input输入框失去焦点,软键盘关闭后,被撑起的页面无法回退到原来正常的位置,导致弹框里的按钮响应区域错位

    H5微信页面开发,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦,软键盘收起后,页面未恢复,导致弹框里的按钮响应区域错位. 解决方案:给输入框(或select选择框)添加失去焦点的 ...

  4. IOS微信6.7.4输入框失去焦点,软键盘关闭后,被撑起的页面无法回退到原来正常的位置

    近期在开发微信H5页面时碰到这个问题,如图,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦,软键盘收起后,页面未恢复,这也是ios的微信版本更新6.7.4之后才遇到的bug. 目前 ...

  5. input输入框失去焦点,软键盘关闭后,滚动的页面无法恢复到原来位置

    H5微信页面开发,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦,软键盘收起后,页面未恢复,导致弹框里的按钮响应区域错位. 解决方案:给输入框(或select选择框)添加失去焦点的 ...

  6. h5 移动端 监听软键盘弹起、收起

    前面一篇博客 h5 安卓 键盘弹起界面适配 修改webview高度提到了在adnroid中如何监听软键盘的弹起与收起,是利用的窗口的高度发生变化window.onresize事件来做突破点的,但是io ...

  7. H5软键盘弹起收回(IOS与Android)

    IOS下中,软键盘处于窗口最顶层,与原有的窗口不冲突,所以底部导航条不会被顶起,但是在android下,软键盘与窗口处于同一层,所以当软键盘弹起时,当前窗口缩小,那么窗口内容自然要被挤: 解决办法: ...

  8. uni-app 在input获取焦点(弹出软键盘后收起软键盘),页面不下滑,留下下方空白

    加入收起软键盘时让页面回正 uni.pageScrollTo({ scrollTop: 0, duration: 0 });

  9. Android之监听手机软键盘弹起与关闭

    背景: 在很多App开发过程中需要在Activity中监听Android设备的软键盘弹起与关闭,但是Android似乎没有提供相关的的监听API给我们来调用,本文提供了一个可行的办法来监听软键盘的弹起 ...

随机推荐

  1. X shell 6下载安装和简单使用

    ①前言:昨天已经上线了的智能家居项目出现了一个BUG,需要重新写个html发布到服务器上,由于公司大佬都在忙别的项目,时间比较紧张,这种小事就落到了我这个小喽啰身上.其实,写个html我还是可以接受的 ...

  2. Code128条形码如何计算其宽度?如何得出其校验位?

    原文链接 Code128条形码是一个非常高密的字母数字条码,能够存储需要的编码数据,它可以编码所有128个ASCII码字符,它使用最少的空间. 在Code128符号体系中,每个数据字符编码都是由11个 ...

  3. CKplayer:视频推荐和分享插件设置

    如果想去掉播放结束后显示精彩视频推荐的插件,可以打开ckplayer.js和ckplayer.xml,找到以下代码,然后注释掉即可: control_rel: 'related.swf,ckplaye ...

  4. String类的判断功能

    /* * Object:是类层级结构中的根类,所有的类都直接或间接的继承自该类. * 如果一个方法的形式参数是Object,那么这里我们就可以传递它的任意的子类对象. * * String类的判断功能 ...

  5. Win32编程API 基础篇 -- 6.菜单和图标

    菜单和按钮 例子:菜单1 本小节仅仅向你展示如果向你的窗口中加入一个基本的菜单,通常你会用到一个提前制作好的菜单资源,这会是一份.rc文件并且会被编译链接进你的.exe可执行程序中.这是具体的流程做法 ...

  6. LVS 源代码分析

    http://blog.chinaunix.net/uid/11207493.html http://zh.linuxvirtualserver.org/blog/3309

  7. Oracle GV$VIEW

    The catclustdb.sql script creates the GV$ views. Run this script if you do not create your database ...

  8. Java Web文件下载

    Web文件下载有两种.一种是文件在站点文件夹下.在浏览器中直接输入文件路径就可以下载.如http://www.xxx.com/file.zip.第二种是文件不在站点文件夹下或者文件是动态生成的(导出报 ...

  9. Linux下C++访问MySQL数据库

    由于想要开始了解并学习用LAMP进行web开发,所以昨晚我在Fedora上安装了MySQL,学习了MySQL的几个常用命令.想着在学习进行web开发(PHP访问数据库)之前,先用我熟悉的C++连接数据 ...

  10. UIViewController 专题

    呵呵 轻轻巧巧    UIViewController self setNeedsStatusBarAppearanceUpdate 刷新状态栏 (内部会重新调用 prefersStatusBarHi ...