解决微信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给我们来调用,本文提供了一个可行的办法来监听软键盘的弹起 ...
随机推荐
- Spring Boot之简单的MVC
最近开始看Spring Boot,发现其开发起来真是方便.今天就来实现一个简单的Spring MVC 请求,纯Java代码的哦. 1.Maven必不可少,先看看都加载了那些依赖: <?xml v ...
- Go:值类型、引用类型
值类型,变量存的就是值本身: in系列t.float系列.bool.string.数组和struct 引用类型,变量存的是一个地址,这是地址存的才是值本身: 指针.slice.map.chan.int ...
- 【01】CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径 向渐变)(转)
CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径 向渐变).而我们今天主要是针对线性渐变来剖析其具体的用法.为了更好的应用 CSS3 ...
- Sublime text如何设置快捷键让编写的HTML文件在浏览器预览?
STEP 1 Tools->Build System->New Build System STEP 2<img src="https://pic3.zhimg.com/ ...
- 【Codeforces 992B】Nastya Studies Informatics
[链接] 我是链接,点我呀:) [题意] 题意 [题解] 因为gcd(a,b)=x 所以设a = nx b = mx 又有ab/gcd(a,b)=lcm(a,b)=y 则nmx = y 即n(m*x) ...
- Java Web学习总结(30)——Service层在MVC框架中的意义和职责
mvc框架由model,view,controller组成,执行流程一般是:在controller访问model获取数据,通过view渲染页面. mvc模式是web开发中的基础模式,采用的是分层设计, ...
- Java Web学习总结(29)——Java Web中的Filter和Interceptor比较
1. 背景 在设计web应用的时候,用户登录/注册是必不可少的功能,对用户登录信息进行验证的方法也是多种多样,大致可以认为如下模式:前端验证+后台验证.根据笔者的经验,一般会在前端进行一些例如是否输入 ...
- github & Front-end JavaScript frameworks
github & Front-end JavaScript frameworks https://github.com/collections/front-end-javascript-fra ...
- 理解 LARGE_INTEGER的定义
http://bbs.csdn.net/topics/310239341 #if defined(MIDL_PASS) typedef struct _LARGE_INTEGER { #else // ...
- php获取代理服务器真实内网IP方法
功能:获取用户真实IP地址,代理服务器内网IP,防HTTP_CDN_FORWARDED_FOR注入 function getIP() { if (isset($_SERVER["HTTP_ ...