近期在开发微信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. 第五篇 elasticsearch express插入数据

    1.后端 在elasticsearch.js文件夹下添加: function addDocument(document) { return elasticClient.index({ index: i ...

  2. macos上改变输入法顺序

    设置界面上是不能拖放顺序的,唯一解决办法是: 一.先选择所有文档使用相同输入源 二.选择用美国英语 三.再选择允许多个输入源,再打开原来的中文输入法 顺序就调过来了!尼玛,这就是苹果的人性化?懒得吐嘈 ...

  3. 第一周作业-Linux基础入门

    写在前面 实验楼中linux基础入门的内容很多,几乎涵盖了所有的常用命令.命令的记忆不是一朝一夕的,更不能死记硬背,在实践中多操作,熟悉后自然就记住了.我没有将对每个命令操作结果都截图记录下来(事实上 ...

  4. App知识点汇总

    1.Fragment 2.AndroidStudio 用夜神安卓模拟器调试 进入夜神模拟器安装目录下的bin目录,执行nox_adb.exe connect 127.0.0.1:62001,Andro ...

  5. NPOI导出EXCEL部分样式不起作用

    在使用NPOI导出excel的时候,设置cell样式,数据量多余6条之后,在后面几条数据没有样式(边框,对其,换行等). 原因是设置CellStyle的时候把CreateCellStyle放在循环列集 ...

  6. 关于goneaway及499

    关于上面现象的分析如下 问题描述: 接口偶发性出现接口耗时过长的情况 根源: “sockets的快速回收”机制被启动 简单代码+数据分析: 1.      经简单分析,耗时主要出现在连接数据库的方法: ...

  7. C# Guid should contain 32 digits with 4 dashes (xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx).

    一.问题描述 在做C# 的 Guid 转换时,出现这个问题:Guid should contain 32 digits with 4 dashes (xxxxxxxx-xxxx-xxxx-xxxx-x ...

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

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

  9. Cogs 6. 线型网络

    6. 线型网络 ★★☆   输入文件:linec.in   输出文件:linec.out   简单对比时间限制:1 s   内存限制:256 MB [问题描述] 有 N(N<=20)台 PC 放 ...

  10. angularJs中对时间戳的处理

    一. ng表达式 <!-- 表达式中使用 --> {{ dt1 | date:'yyyy-MM-dd HH:mm:ss' }} 二. 控制器中使用 //controller必须注入 $fi ...