问题说明:

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. Servlet监听器的使用

    Servlet监听器的使用 制作人:全心全意 在Servlet技术中已经定义了一些事件,并且可以针对这些事件来编写相关的事件监听器,从而对事件做出相应的处理.例如,想要在Web应用程序启动和关闭时来执 ...

  2. CentOS7 安装 PHP7.2

    点击查看原文 安装源 安装 EPEL 软件包: $ sudo yum install epel-release 安装 remi 源: $ sudo yum install http://rpms.re ...

  3. buf.writeInt16BE()函数详解

    buf.writeInt16BE(value, offset[, noAssert]) buf.writeInt16LE(value, offset[, noAssert]) value {Numbe ...

  4. lastpass密码管理工具使用教程

    现在移动互联网发展异常空气,无论访问哪个平台或者网站必须要注册账号,日子久了就会发现最痛苦的就是记住这些网站的密码.因为我们不可能将所有的网站都是设置同样的的账号密码,因为国内网站用户数据库被泄露的事 ...

  5. MongoDB 数据文件备份与恢复

    备份与恢复数据对于管理任何数据存储系统来说都是非常重要的. 1.冷备份与恢复——创建数据文件的副本(前提是要停止MongoDB服务器),也就是直接copy MongoDB将所有数据都存储在数据目录下, ...

  6. POJ 3101 大数+gcd

    题目大意: 星星作圆周运动的周期给出,若已连成一条线,下一次所有星星在同一条线上的时间 用分数形式输出 这里我们可以利用追及问题来计算出两个星星之间连成一条直线的时间,也即速度快的星星追上速度慢的星星 ...

  7. Codeforces Round #219 (Div. 2) D题

    D. Counting Rectangles is Fun time limit per test 4 seconds memory limit per test 256 megabytes inpu ...

  8. spring-boot | 整合通用Mabatis 分页插件PageHelper

    Mybatis通用Mapper介绍 Mybatis 通用 Mapper 极其方便的使用 Mybatis 单表的增删改查,支持单表操作,不支持通用的多表联合查询 优点: 通用 Mapper 可以极大的方 ...

  9. 学习——Git及VersionControl

    一.Git基本介绍 1.Git是什么? Git是一款免费.开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目.用以有效.高速的处理从很小到非常大的项目版本管理.Git 是 Linus To ...

  10. Weblogic补丁升级操作手冊

    1.查看Weblogic版本号 方法一 [weblogic@Weblogic201 ~]$ cd /home/weblogic/Oracle/Middleware/wlserver_10.3/serv ...