IOS上微信在输入框弹出键盘后，页面不恢复，下方有留白

一、问题页面示例

二、问题分析

最近微信和ios都有版本升级，不知道是哪边升级造成的，但是经过测试人员反馈，软键盘收起后，再滚动一下页面，下面的留白就会消失。所以只要在输入完毕后模拟一下这个“滚动”的操作，就能解决问题了。

关于这个现象出现的原因个人分析如下，仅供参考。

首先了解下window对象的scrollY属性,它返回的是当前垂直滚动的像素数，未发生滚动时值为0，向上滚动为正值。

当软键盘弹出后，页面会被软键盘顶上去，从而改变了window.scrollY的值，当软键盘收起后，页面停留在当前scrollY偏移的位置，所以下方有一大块留白。

因此可以在input失焦后让页面回滚到顶部来解决问题，当然这种解释还是有疑问的，为什么回滚到顶部以后下方多出的留白就消失了？希望知道的朋友能留言解疑。

三、解决方法

input、textarea和select输入或下拉选择后均会出现以上问题。

1、如果使用jquery，修改起来就比较方便

$('input, textarea, select').on('blur',function(){

    window.scroll(0, 0);

});

 

2、如果使用vue，要修改的地方不是很多的话，直接用vue的v-on添加blur事件即可，以input为例

<input type="text" @blur="fixScroll" placeholder="请输入xxx"/>

//methods中添加：

fixScroll() {

    window.scrolll(0, 0);

}

如果修改的地方比较多，建议使用addEventListener循环添加事件，在组件销毁记得remove就好，以input为例

mounted() {

    var a = document.getElementsByTagName('input'); 

    for (let i = 0; i < a.length; i++) {    

        a[i].addEventListener('blur', this.fixScroll); 

    } 

},

destroyed() { ...移除mounted中添加的事件...｝

methods: {

    fixScroll() {    

        window.scrolll(0, 0);   

    }   

}

 

3、因为这个问题只出现在ios端，所以可以在添加事件前判断是不是在ios系统上运行

var m = navigator.userAgent;

var isAndroid = m.indexOf('Android') > -1 || m.indexOf('Adr') > -1;   //android终端

var isIos = !!m.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);                  //ios终端       

if (isIos) {

//为input、textarea、select添加blur事件

}