描述

IOS13.

IOS设备中,input唤醒软键盘后,body整体会向上滚动,如果input框输入完成确定后,如果页面在最底部则不回弹,导致fixed布局实际效果上移,fixed布局内按钮点不到。

如图

解决方案

input onblur 让body滚动,页面回弹

function inputBlur() {
if (/iphone|ipad|ipod/.test(navigator.userAgent.toLowerCase())) {
let speed = 1;
setTimeout(function () {
var currentPosition = document.documentElement.scrollTop || document.body.scrollTop;
currentPosition -= speed;
window.scrollTo(0, currentPosition); // 页面向上滚动
currentPosition += speed;
window.scrollTo(0, currentPosition); // 页面向下滚动
});
}
}

解决方案在线演示

[BUG]微信浏览器 iOS input 失焦页面不回弹的更多相关文章

  1. fastclick使用与 fastclick ios11.3相关bug原因(ios输入框点击变得不灵敏,ios input失焦后,页面上移,点击不了)

    FastClick 移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件,这是为了检查用户是否在做双击.为了能够立即响应用户的点击事件,就有了FastClick. 安装fastc ...

  2. 解决微信浏览器无法使用reload()刷新页面

    场景是这样子的,页面在初始化时有一个ajax请求,在页面上有一个按钮,点击的时候执行window.location.reload(),正常情况reload()后页面依然会向后台发出请求,但在安卓的微信 ...

  3. js网页判断移动终端浏览器版本信息是安卓还是苹果ios,判断在微信浏览器跳转不同页面,生成二维码

    一个二维码,扫描进入网页,自动识别下载苹果和安卓客户端,判断网页如下,(只有苹果的微信不能自动跳转)所以加个微信判断. <!DOCTYPE html> <html> <h ...

  4. 解决苹果手机(IOS)input失焦后,页面不恢复的问题

    var winHeight = $(window).height(); var u = navigator.userAgent, app = navigator.appVersionvar isIOS ...

  5. 改进:js修改iOS微信浏览器的title

    问题简介 前端入门没多久,可能连入门也不算,最近网上流行各自书籍改名,什么<前端开发,从入门到放弃>,<Android开发,从入门到改行>之类的,程序员真是个爱自嘲的群体,但我 ...

  6. JS动态修改微信浏览器中的title

    JS动态修改微信浏览器中的title我们的原理是设置一个ifame然后我们再加载一下就可以实现了,具体的例子如下所示. 平时使用JS修改title,直接document.title=新标题就好了 这样 ...

  7. 解决H5在微信浏览器或QQ浏览器修改title的问题

    传送门:http://blog.csdn.net/code_for_free/article/details/51195468 如果是Android,使用 document.title = ‘1231 ...

  8. vue-router 在微信浏览器中操作history URl未改变的解决方案

    在PC端和手机浏览器中router.replace() or router.push()能够正常使用,页面的地址和页面都正常显示:但是在微信中,从/a页面通过router.push('/b')跳转到/ ...

  9. C#判断用户是否使用微信浏览器,并据此来显示真实内容或二维码

    平时我们看一些网页的时候会发现这样的功能:有的页面只能在微信里访问,如果在电脑上访问就只显示当前地址的二维码.这个用C#怎么实现呢?我们结合代码来看看. 首先,我们需要先判断用户使用的是什么浏览器,这 ...

随机推荐

  1. Qt 添加Includes、Libraries库

    1 #------------------------------------------------- # # 加载相机SDK-Includes-Libraries # #------------- ...

  2. scarky test

  3. 接口测试-chap3-https请求证书问题

    接口地址如果是HTTPS,需要安装证书,或者在发送请求时传入参数verify=False,表示忽略 res = requests.get(url, verify=False)

  4. 为什么有这么多人呼吁要取代Facebook?

    扎克伯格这段时间算是栽了,身为人生大赢家的他或许正在遭受最为灰暗的时刻.因为泄露5000万用户数据这一事件,Facebook股价暴跌且扎克伯格身家缩水.被英国与美国相关部门调查.#删除Facebook ...

  5. Luogu_2878_[USACO07JAN]保护花朵Protecting the Flowers

    题目描述 Farmer John went to cut some wood and left N (2 ≤ N ≤ 100,000) cows eating the grass, as usual. ...

  6. 云服务器之——Linux下配置JDK环境

    在Linux下jdk的安装已经操作了很多次,每次发现自己还是会忘记之前的操作,所以今天就简单的来做个记录. 第一步:下载jdk安装包 登录oracle官网:https://www.oracle.com ...

  7. ZOJ 2532 网络流最小割

    求最小割的问题. 题意:已知网络中有n个源点,m的中转站(也就是节点),一个汇点(编号为0).给出网络,求一些边(增大这个边就可以增大汇点流量的边). 思路:一开始代码只找了有流=0就加入输出数组的情 ...

  8. grep显示前后几行信息

    显示foo及前5行 1 grep -B 5 foo file 显示foo及后5行 1 大专栏  grep显示前后几行信息ode"> grep -A 5 foo file 显示 file ...

  9. getshell技巧-phpMyAdmin的利用

    生活就是泥沙俱下,鲜花和荆棘并存.--毕淑敏 1.明确目标2.信息收集3.漏洞挖掘和利用 信息收集 明确路径 利用目录扫描工具,对目标网站进行扫描,获取网站目录.常用工具有Kali中的DirBuste ...

  10. GCD实现多个定时器,完美避过NSTimer的三大缺陷(RunLoop、Thread、Leaks)

    定时器在我们每个人做的iOS项目里面必不可少,如登录页面倒计时.支付期限倒计时等等,一般来说使用NSTimer创建定时器: + (NSTimer *)timerWithTimeInterval:(NS ...