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>

View Code

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;
}

转载于:https://www.cnblogs.com/ziChin/p/10278016.html

IOS上微信在输入框弹出键盘后，页面不恢复，下方有留白，有弹窗弹出时页面内容感应区域错位...相关推荐

微信双开是定时炸弹？关于非越狱iOS上微信分身高危插件ImgNaix的分析
作者:蒸米@阿里移动安全序言微信作为手机上的第一大应用,有着上亿的用户.并且很多人都不只拥有一个微信帐号,有的微信账号是用于商业的,有的是用于私人的.可惜的是官方版的微信并不支持多开的功能,并且频 ...
微信双开还是微信定时炸弹？- 关于非越狱iOS上微信分身高危插件ImgNaix的分析...
蒸米 · 2016/04/28 11:01 [email protected] 0x00 序微信作为手机上的第一大应用,有着上亿的用户.并且很多人都不只拥有一个微信帐号,有的微信账号是用于商业的,有 ...
微信双开是定时炸弹？关于非越狱iOS上微信分身高危插件ImgNaix的分析 1
序言微信作为手机上的第一大应用,有着上亿的用户.并且很多人都不只拥有一个微信帐号,有的微信账号是用于商业的,有的是用于私人的.可惜的是官方版的微信并不支持多开的功能,并且频繁更换微信账号也是一件非常 ...
iOS仿微信聊天输入框、评论输入框
最近项目有需求,需要实现一个类似微信聊天输入框的组件,用在全平台的评论功能中.大概需求就是输入的文字占满一行时,自动折行并且增大输入框的高,输入框的高有默认的最大值.在此,记录一下遇到的问题. 1.项 ...
解决ios上微信无法捕获返回键按钮事件的问题
1 //匿名函数 2 $(function(){ 3 getHistory(); 4 var flag=false; 5 setTimeout(function(){ 6 flag=true 7 }, ...
解决 - 移动端(H5) ios 在点击input输入框,弹起软键盘后,顶部输入框失效的问题
问题: 在项目开发过程中发现这个问题,在安卓下是正常的,ios固定定位就会失效,在网上看了许多ios兼容的博客,都没有效果,卡了很久, ios 的软键盘弹出后,会把页面撑高.他就不在原来的位置定位了 ...
ios上微信小程序密码框光标离开提示存储密码解决方案
方案1:在苹果手机上面把 "自动填充密码"关闭,但是苹果这个默认开启,而且大部分客户也不会去自己关闭. 方案2:欺骗苹果手机,代码实现. 先说解决思路,通过测试发现,在账号框不为空 ...
ios 键盘弹出后马上收回_ios12键盘唤起后，收回键盘弹窗错位解决方案
问题最近React的一个H5移动端项目遇到个问题,在iOS12中发现:点开弹窗后,点击弹窗里的input输入框,唤起键盘后,弹窗被键盘顶到页面顶部.但是在收起键盘后,弹窗表面上看是回到原位了,但是却 ...
2019最佳弹窗/弹出框设计20例【附教程】
弹窗/弹出框是APP或者网站与用户交互常见的方式之一.不同的网页弹窗和App弹框适用于不用的场景,弹窗的设计直接影响用户体验.不知道如何提高弹出框的用户体验设计? 小编从优质网站精心挑选了20例弹窗/ ...