IOS上微信在输入框弹出键盘后,页面不恢复,下方有留白,有弹窗弹出时页面内容感应区域错位
问题说明:
ios中,键盘的弹起,页面会往上挪动,使输入框展示在页面中间,键盘隐藏页面会下挪恢复原状。
在微信移动端,ios页面不恢复,下方有留白。
收起键盘的瞬间,如果有弹窗弹出,此时时页面内容应区域错位。
问题栗子配图:

解决方案:
其实只要知道了原因,坑填起来很简单:输入法的软键盘影响了页面的高度和位置。
我们重置页面位置起始位置为0,重置页面高度为初始高度。
核心代码:
window.scroll(0, 0);
window.innerHeight = window.outerHeight = “页面之前高度”
全部代码:
<script>
data () {
return {
screenHeight: '';
}
},
updated () {
let that = this;
this.$nextTick(function () {
let $inputs = Array.from(document.getElementsByTagName('input'));
/*let body = document.body;
$inputs.forEach(item => { // 定时器是处理多个input间快速切换闪屏问题,可省略
item.onblur = function () { // onblur是核心方法
clearTimeout(body.timer);
body.timer = setTimeout(() => {
window.scroll(0, 0);
window.innerHeight = window.outerHeight = that.screenHeight
}, 150)
}
item.onfocus = function () {
clearTimeout(body.timer)
}
})*/
let body = document.body;
$inputs.forEach(item => {
item.onblur = function () { // onblur是核心方法
window.scroll(0, 0);
window.innerHeight = window.outerHeight = that.screenHeight
}
})
})
},
mounted () {
this.screenHeight = document.documentElement.clientHeight
}
</script>
tips:因为只有微信端ios有问题,这个是判断是否为微信浏览器的一段代码
window.onload = function() {
isWeixinBrowser();
}
//判断是否微信浏览器
function isWeixinBrowser() {
var ua = navigator.userAgent.toLowerCase();
var result = (/micromessenger/.test(ua)) ? true : false;
if (result) {
console.log('你正在访问微信浏览器');
}
else {
console.log('你访问的不是微信浏览器');
}
return result;
}
IOS上微信在输入框弹出键盘后,页面不恢复,下方有留白,有弹窗弹出时页面内容感应区域错位的更多相关文章
- 微信双开是定时炸弹?关于非越狱iOS上微信分身高危插件ImgNaix的分析
作者:蒸米@阿里移动安全 序言 微信作为手机上的第一大应用,有着上亿的用户.并且很多人都不只拥有一个微信帐号,有的微信账号是用于商业的,有的是用于私人的.可惜的是官方版的微信并不支持多开的功能,并且频 ...
- 解决ios上微信无法捕获返回键按钮事件的问题
1 //匿名函数 $(function(){ getHistory(); var flag=false; setTimeout(function(){ flag=true },1000) window ...
- 【转】swift实现ios类似微信输入框跟随键盘弹出的效果
swift实现ios类似微信输入框跟随键盘弹出的效果 为什么要做这个效果 在聊天app,例如微信中,你会注意到一个效果,就是在你点击输入框时输入框会跟随键盘一起向上弹出,当你点击其他地方时,输入框又会 ...
- ios兼容 input输入时弹出键盘框 页面整体上移键盘框消失后在ios上页面不能回弹的问题
前端h5混合开发手机端ios 当有input输入时,手机下方弹出键盘使页面上移,当输入完成,键盘消失后页面显示回到原位,但实际不能点击(可点击上方区域,有反应),也就是说实际是没有回弹. 解决办法: ...
- 如何保持iOS上键盘出现时输入框不被覆盖
在 iOS5 上请求显示键盘时,系统从屏幕底部将键盘滑入上来,位于应用的内容之上. (墙内:http://mikixiyou.iteye.com/blog/1488302) 如果屏幕中的内容项目比较多 ...
- H5微信页面开发 IOS系统 input输入框失去焦点,软键盘关闭后,被撑起的页面无法回退到原来正常的位置,导致弹框里的按钮响应区域错位
H5微信页面开发,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦,软键盘收起后,页面未恢复,导致弹框里的按钮响应区域错位. 解决方案:给输入框(或select选择框)添加失去焦点的 ...
- 保持iOS上键盘出现时输入框不被覆盖
如果屏幕中的内容项目比较多,键盘就可能覆盖住文本输入框之类的对象.你必须调整你的内容,使得输入框保持可见. 你会想到哪些处理方法呢? 第一种, 临时调整窗口中各个视图的大小,使得键盘从下向上占领的区域 ...
- ios上有时候提交按钮点击两次才可以取消输入框软键盘
ios上有时候提交按钮点击两次才可以取消输入框软键盘,点击第一次软键盘消失,点击第二次输入框页面消失,这样用户体验不好.我的做法是用 touchstart 代替click来处理 反应快,但是有时候会出 ...
- 微坑---微信小程序ios上时间字符串转换为时间戳时,在开发工具上和安卓手机上运行成功
给定一个时间字符串 var time="2017-02-27 16:42:53" js有三种转换为时间戳的方法:1.var timestamp = Date.parse(time ...
随机推荐
- DTD 文件的引入
MyBatis 有两种配置文件:核心配置文件(mybatis- config.xml)和 SQL 映射文件(mapper.xml).这两种配置文件都需要手动引入各自的 DTD 文件(mybatis-3 ...
- 手机通过Charles用线上域名访问PC本地项目
最近调试微信公众号,由于微信授权需要线上正式环境的域名,笔者想把手机公众号网页重定向到PC本地localhost调试. 该方法通过Charles代理转发,适用所有需要域名重定向的场景,例如手机通过在线 ...
- python json、 pickle 、shelve 模块
json 模块 用于序列化的模块 json,用于字符串 和 python数据类型间进行转换 Json模块提供了四个功能:dumps.dump.loads.load #!/usr/bin/env pyt ...
- Educational Codeforces Round 41 D. Pair Of Lines(961D)
[题意概述] 给出平面上的10W个点,要求判断这些点能否被两条直线穿过,即一个点至少在一条直线上. [题解] 思路很快可以想到.取3个不共线的点,它们形成一个三角形:如果有解,其中的一条直线一定与三角 ...
- [bzoj1005][HNOI2008][明明的烦恼] (高精度+prufer定理)
Description 自从明明学了树的结构,就对奇怪的树产生了兴趣......给出标号为1到N的点,以及某些点最终的度数,允许在任意两点间连线,可产生多少棵度数满足要求的树? Input 第一行为N ...
- 九度oj 题目1053:互换最大最小数
题目1053:互换最大最小数 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:7538 解决:3049 题目描述: 输入一个数n,然后输入n个数值各不相同,调换数组中最大和最小的两个数,然后 ...
- codeforces 371B - Fox Dividing Cheese
#include<stdio.h> int count; int gcd(int a,int b) { if(b==0) return a; return gcd(b,a%b); ...
- 0213Zabbix通过percona监控MySQL
因为Zabbix自带的MySQL监控没有提供可以直接使用的Key,所以一般不采用,业界的同学们都使用Percona Monitoring Plugins 监控 MySQL的方式 Percona介绍 P ...
- 在IIS6,7中部署ASP.NET网站[转]
阅读目录 开始 查看web.config文件 在IIS中创建网站 IIS6 添加扩展名映射 IIS6 无扩展名的映射 目录的写入权限 SQL SERVER的配置 在IIS7中部署ASP.NET程序 8 ...
- Speak a Good Word for SB
今天举行了英语词汇发音交流会,通过这个会议我有了非常大了感触. 一共同拥有三个环节.第一个环节读单词我们组读的单词it.pen.do.stop.think.park.sink.wood.在这一个环节中 ...