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