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

目前的解决办法是给输入框(或select选择框)添加失去焦点的事件,当输入框失去焦点,页面自动滚动到顶部,并且需要加定时器,否则偶尔会失效,具体代码如下:

$("input,select").blur(function(){
setTimeout(() => {
const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
window.scrollTo(0, Math.max(scrollHeight - 1, 0));
}, 100);
})

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

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

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

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

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

  3. 解决微信H5页面软键盘弹起后页面下方留白的问题(iOS端)

    前言:微信H5项目,ios端出现了软键盘输完隐藏后页面不会回弹,下方会有一大块留白 最近微信和ios都有版本升级,不知道是哪边升级造成的,但是经过测试,软键盘收起后,再滚动一下页面,下面的留白就会消失 ...

  4. h5 input失去焦点软键盘把页面顶起

    var broswer=localStorage.getItem('temp') //浏览器环境 var u = navigator.userAgent var isiOS = !!u.match(/ ...

  5. IOS微信端软键盘收起后界面按钮失效问题

    问题描述: 1.在vue里封装了一个confirm的弹窗(即如下一个弹窗) 2.发现在IOS微信客户端中打开后,当需要在表单中输入内容的时候,很自然的点击了键盘右上角的[完成]按钮 3.啊~~~,惊人 ...

  6. web中ios移动端软键盘收起后,页面内容留白不下滑

    微信里面打开web页面,在ios软键盘收起时,页面键盘位置的内容留白,如下图 这个问题纠结了很久,然后请教了老大(威哥),看到页面老大给出的方案就是代码改变滚动条的位置. 这里就监听键盘收起的事件,来 ...

  7. android输入框显示在软键盘上边

    有时候在界面需要输入的时候,如果输入框在界面的下方,软键盘弹出的时候会遮挡输入框界面,对用户的体验不是很好. 在网上找的别人的解决方案 首先: 清单文件里面配置:android:windowSoftI ...

  8. android全屏下的输入框未跟随软键盘弹起问题

    最近开发中遇到,全屏模式下输入框在底部不会跟随软键盘弹起.于是网上搜索了解决的方案.大致找到了两种方案. 第一种 定义好此类 public class SoftKeyBoardListener { p ...

  9. 关于IOS 微信浏览器 点击输入框自动放大问题

    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0& ...

随机推荐

  1. This account is currently not available

    今天在linux下切换用户发现提示This account is currently not available,说是无效用户了后来网上查了一下发现是用户的shell禁止登录了,解决方法只要开启she ...

  2. 8、非root权限下安装perl以及perl模块

    转载:http://www.cnblogs.com/nkwy2012/p/6418669.html 转载自http://www.zilhua.com 在本博客中,所有的软件安装都在服务器上,且无roo ...

  3. Luogu 2258 [NOIP2014] 子矩阵

    被普及组虐了,感觉

  4. 20.Ecshop 2.x/3.x SQL注入/任意代码执行漏洞

    Ecshop 2.x/3.x SQL注入/任意代码执行漏洞 影响版本: Ecshop 2.x Ecshop 3.x-3.6.0 漏洞分析: 该漏洞影响ECShop 2.x和3.x版本,是一个典型的“二 ...

  5. surging+EFCore 服务实现入门

    准备工作 本篇文章基于上篇基础上进行的,请先了解此篇  surging+CentOS7+docker+rancher2.0 菜鸟部署运行笔记 开发环境  Visual Studio 2017 15.5 ...

  6. Vue.js 源码实现

    目录 Vue.js 代码实现 1. 步骤一 2. 步骤二 3.步骤三 Vue.js 工作机制 初始化 编译 响应式 虚拟dom 更新视图 编译 Vue.js 代码实现 检验学习效果的最好方法就是自己造 ...

  7. 基本图形的绘制(基于skimage)

    图形包括线条.圆形.椭圆形.多边形等.在skimage包中,绘制图形用的是draw模块,不要和绘制图像搞混了. 一  线条 函数调用格式:     skimage.draw.line(r1,c1,r2 ...

  8. LOJ6235 区间素数个数(min_25筛)

    题目链接:LOJ 题目大意:看到题目名字应该都知道是啥了吧. $1\le N\le 10^{11}$. 阉割版 min_25 筛.发现答案实际上就是 min_25 筛中 $g(N,pl)$ 的值.(取 ...

  9. SAS笔记(8) 利用数组重构SAS数据集

    在实际应用中,我们经常会把宽数据(一个患者一条观测)转化为长数据(一个患者多条观测)或者将长数据(一个患者多条观测)转换为宽数据(一个患者一条观测),在R中我们可以利用Reshape2包来实现.在SA ...

  10. Educational Codeforces Round 57D(DP,思维)

    #include<bits/stdc++.h>using namespace std;char s[100007];long long a[100007];long long dp[100 ...