问题说明:

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上微信在输入框弹出键盘后,页面不恢复,下方有留白,有弹窗弹出时页面内容感应区域错位的更多相关文章

  1. 微信双开是定时炸弹?关于非越狱iOS上微信分身高危插件ImgNaix的分析

    作者:蒸米@阿里移动安全 序言 微信作为手机上的第一大应用,有着上亿的用户.并且很多人都不只拥有一个微信帐号,有的微信账号是用于商业的,有的是用于私人的.可惜的是官方版的微信并不支持多开的功能,并且频 ...

  2. 解决ios上微信无法捕获返回键按钮事件的问题

    1 //匿名函数 $(function(){ getHistory(); var flag=false; setTimeout(function(){ flag=true },1000) window ...

  3. 【转】swift实现ios类似微信输入框跟随键盘弹出的效果

    swift实现ios类似微信输入框跟随键盘弹出的效果 为什么要做这个效果 在聊天app,例如微信中,你会注意到一个效果,就是在你点击输入框时输入框会跟随键盘一起向上弹出,当你点击其他地方时,输入框又会 ...

  4. ios兼容 input输入时弹出键盘框 页面整体上移键盘框消失后在ios上页面不能回弹的问题

    前端h5混合开发手机端ios  当有input输入时,手机下方弹出键盘使页面上移,当输入完成,键盘消失后页面显示回到原位,但实际不能点击(可点击上方区域,有反应),也就是说实际是没有回弹. 解决办法: ...

  5. 如何保持iOS上键盘出现时输入框不被覆盖

    在 iOS5 上请求显示键盘时,系统从屏幕底部将键盘滑入上来,位于应用的内容之上. (墙内:http://mikixiyou.iteye.com/blog/1488302) 如果屏幕中的内容项目比较多 ...

  6. H5微信页面开发 IOS系统 input输入框失去焦点,软键盘关闭后,被撑起的页面无法回退到原来正常的位置,导致弹框里的按钮响应区域错位

    H5微信页面开发,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦,软键盘收起后,页面未恢复,导致弹框里的按钮响应区域错位. 解决方案:给输入框(或select选择框)添加失去焦点的 ...

  7. 保持iOS上键盘出现时输入框不被覆盖

    如果屏幕中的内容项目比较多,键盘就可能覆盖住文本输入框之类的对象.你必须调整你的内容,使得输入框保持可见. 你会想到哪些处理方法呢? 第一种, 临时调整窗口中各个视图的大小,使得键盘从下向上占领的区域 ...

  8. ios上有时候提交按钮点击两次才可以取消输入框软键盘

    ios上有时候提交按钮点击两次才可以取消输入框软键盘,点击第一次软键盘消失,点击第二次输入框页面消失,这样用户体验不好.我的做法是用 touchstart 代替click来处理 反应快,但是有时候会出 ...

  9. 微坑---微信小程序ios上时间字符串转换为时间戳时,在开发工具上和安卓手机上运行成功

    给定一个时间字符串  var time="2017-02-27 16:42:53" js有三种转换为时间戳的方法:1.var timestamp = Date.parse(time ...

随机推荐

  1. Centos7安装MySQL5.7(yum)

    本人尝试过使用源码安装方式,那叫一个头疼,各种问题,于是采用yum方式安装,没想到如此简单: 此服务器是刚买的,所以以前没有安装过mysql,如果以前安装过mysql的,好像要卸载干净再安装(其实我也 ...

  2. idea14远程调试linux下的tomcat

    进入到idea的tomcat的run/debug配置,新建个remote tomcat,然后填写相关信息,如上图(注意远程调试端口). 再选择Startup/Connection,如下图所示: 到此, ...

  3. The Falling Leaves(建树方法)

    uva 699 紫书P159 Each year, fall in the North Central region is accompanied by the brilliant colors of ...

  4. MySQL 分库、分表

    Mysql Sharding 前言 1)Sharding是按照一定规则重新分布数据的方式 2)解决单机写入压力过大和容量问题 3)  解决单机查询慢的问题 4)本文主要根据用户登录场景分析 Shard ...

  5. https://segmentfault.com/a/1190000012844836---------关于SpringBoot上传图片的几种方式

    关于SpringBoot上传图片的几种方式 https://segmentfault.com/a/1190000012844836

  6. Leetcode 80.删除重复数组的重复项

    删除重复数组的重复项 给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素最多出现两次,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外空间 ...

  7. CF671C. Ultimate Weirdness of an Array

    n<=200000个<=200000的数问所有的f(i,j)的和,表示去掉区间i到j后的剩余的数字中任选两个数的最大gcd. 数论日常不会.. 先试着计算一个数组:Hi表示f(l,r)&l ...

  8. Linux服务管理(Ubuntu服务管理工具sysv-rc-conf)(转)

    Linux运行级别 Linux系统任何时候都运行在一个指定的运行级上,并且不同的运行级的程序和服务都不同,所要完成的工作和要达到的目的都不同,系统可以在这些运行级之间进行切换,以完成不同的工作. 运行 ...

  9. 矩阵覆盖,基本DP题目

    https://www.nowcoder.net/practice/72a5a919508a4251859fb2cfb987a0e6?tpId=13&tqId=11163&tPage= ...

  10. Codeforces Round #245 (Div. 1)——Guess the Tree

    题目链接 题意: n个节点,给定每一个节点的子树(包含自己)的节点个数.每一个节点假设有子节点必定大于等于2.求这种数是否存在 n (1 ≤ n ≤ 24). 分析: 用类似DP的思路,从已知開始.这 ...