解决微信H5页面软键盘弹起后页面下方留白的问题(iOS端)
前言:微信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端)的更多相关文章
- Layman 解决MUI 软键盘弹起挤压页面问题
问题:在使用mui和H5+进行移动端开发的时候,经常会遇见需要用户输入的情况 当input获取焦点弹起软键盘的时候,经常会遇见软键盘挤压页面.软键盘遮挡输入框等一系列问题: 原因:造成这种现象的原因是 ...
- vue H5页面在微信浏览器打开软键盘关闭导致页面空缺的问题。
methods:{ inputBlur () { // window.scroll(0, 0); setTimeout(() => { // alert(1); if (document.act ...
- H5微信页面开发 IOS系统 input输入框失去焦点,软键盘关闭后,被撑起的页面无法回退到原来正常的位置,导致弹框里的按钮响应区域错位
H5微信页面开发,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦,软键盘收起后,页面未恢复,导致弹框里的按钮响应区域错位. 解决方案:给输入框(或select选择框)添加失去焦点的 ...
- IOS微信6.7.4输入框失去焦点,软键盘关闭后,被撑起的页面无法回退到原来正常的位置
近期在开发微信H5页面时碰到这个问题,如图,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦,软键盘收起后,页面未恢复,这也是ios的微信版本更新6.7.4之后才遇到的bug. 目前 ...
- input输入框失去焦点,软键盘关闭后,滚动的页面无法恢复到原来位置
H5微信页面开发,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦,软键盘收起后,页面未恢复,导致弹框里的按钮响应区域错位. 解决方案:给输入框(或select选择框)添加失去焦点的 ...
- h5 移动端 监听软键盘弹起、收起
前面一篇博客 h5 安卓 键盘弹起界面适配 修改webview高度提到了在adnroid中如何监听软键盘的弹起与收起,是利用的窗口的高度发生变化window.onresize事件来做突破点的,但是io ...
- H5软键盘弹起收回(IOS与Android)
IOS下中,软键盘处于窗口最顶层,与原有的窗口不冲突,所以底部导航条不会被顶起,但是在android下,软键盘与窗口处于同一层,所以当软键盘弹起时,当前窗口缩小,那么窗口内容自然要被挤: 解决办法: ...
- uni-app 在input获取焦点(弹出软键盘后收起软键盘),页面不下滑,留下下方空白
加入收起软键盘时让页面回正 uni.pageScrollTo({ scrollTop: 0, duration: 0 });
- Android之监听手机软键盘弹起与关闭
背景: 在很多App开发过程中需要在Activity中监听Android设备的软键盘弹起与关闭,但是Android似乎没有提供相关的的监听API给我们来调用,本文提供了一个可行的办法来监听软键盘的弹起 ...
随机推荐
- 转载:tomcat实现热部署的配置
tomcat实现热部署的配置 我们实现热部署后,自然就可以通过maven操作tomcat了,所以就需要maven取得操作tomcat的权限,现在这一步就是配置tomcat的可操作权限. 进入tom ...
- SERE0014: Illegal HTML character: decimal 154
问题:jmeter,生成报告转化成html,报错SERE0014: Illegal HTML character: decimal 154 原因: 某些字符,特别是控制字符#x7F-#x9F ,在XM ...
- 1.Linux标准IO编程
1.1Linux系统调用和用户编程接口 1.1.1系统调用 用户程序向操作系统提出请求的接口.不同的系统提供的系统调用接口各不相同. 继承UNIX系统调用中最基本和最有用的部分. 调用按照功能分:进程 ...
- 使用nfs3将hdfs挂载到本地或远程目录(非kerberos适用)
最基本的配置方法,aix.kerberos等的操作详见http://hadoop.apache.org/docs/current/hadoop-project-dist/hadoop-hdfs/Hdf ...
- getContextPath和getRealPath的区别-----其实主要区别就是相对路径和绝对路径
getContextPath和getRealPath的区别 其实主要区别就是相对路径和绝对路径 https://blog.csdn.net/zsmj_2011/article/details/4121 ...
- POJ 2217 Secretary
Secretary Time Limit: 1000ms Memory Limit: 65536KB This problem will be judged on PKU. Original ID: ...
- Android ToggleButton:状态切换的Button
Android ToggleButton:状态切换的Button Android ToggleButton和Android Button类似,但是ToggleButton提供了一种选择机制,可以 ...
- [poj2368]Buttons_博弈论
Buttons poj-2368 题目大意:给定n个按钮,每次可以按动[1,t]个.求最小的t使得先手必败. 注释:$1\le n\le 10^8$. 想法:经典巴什博弈. 求n的最小非1约数-1即可 ...
- PageUtil ,简单的分页工具
public class PageUtil { private int totalCount;//总数 private int pageSize=10;//每页显示数量 private int cur ...
- Ubuntu 16.04安装Sublime Text3
1.安装: sudo add-apt-repository ppa:webupd8team/sublime-text-3 sudo apt-get update sudo apt-get instal ...