前言:微信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. 转载:tomcat实现热部署的配置

    tomcat实现热部署的配置   我们实现热部署后,自然就可以通过maven操作tomcat了,所以就需要maven取得操作tomcat的权限,现在这一步就是配置tomcat的可操作权限. 进入tom ...

  2. SERE0014: Illegal HTML character: decimal 154

    问题:jmeter,生成报告转化成html,报错SERE0014: Illegal HTML character: decimal 154 原因: 某些字符,特别是控制字符#x7F-#x9F ,在XM ...

  3. 1.Linux标准IO编程

    1.1Linux系统调用和用户编程接口 1.1.1系统调用 用户程序向操作系统提出请求的接口.不同的系统提供的系统调用接口各不相同. 继承UNIX系统调用中最基本和最有用的部分. 调用按照功能分:进程 ...

  4. 使用nfs3将hdfs挂载到本地或远程目录(非kerberos适用)

    最基本的配置方法,aix.kerberos等的操作详见http://hadoop.apache.org/docs/current/hadoop-project-dist/hadoop-hdfs/Hdf ...

  5. getContextPath和getRealPath的区别-----其实主要区别就是相对路径和绝对路径

    getContextPath和getRealPath的区别 其实主要区别就是相对路径和绝对路径 https://blog.csdn.net/zsmj_2011/article/details/4121 ...

  6. POJ 2217 Secretary

    Secretary Time Limit: 1000ms Memory Limit: 65536KB This problem will be judged on PKU. Original ID:  ...

  7. Android ToggleButton:状态切换的Button

     Android ToggleButton:状态切换的Button Android ToggleButton和Android Button类似,但是ToggleButton提供了一种选择机制,可以 ...

  8. [poj2368]Buttons_博弈论

    Buttons poj-2368 题目大意:给定n个按钮,每次可以按动[1,t]个.求最小的t使得先手必败. 注释:$1\le n\le 10^8$. 想法:经典巴什博弈. 求n的最小非1约数-1即可 ...

  9. PageUtil ,简单的分页工具

    public class PageUtil { private int totalCount;//总数 private int pageSize=10;//每页显示数量 private int cur ...

  10. Ubuntu 16.04安装Sublime Text3

    1.安装: sudo add-apt-repository ppa:webupd8team/sublime-text-3 sudo apt-get update sudo apt-get instal ...