html 软键盘 页面高度,页面的input唤醒软键盘再收起后，页面会出现软键盘高度的空白背景...

微信浏览器在版本6.7.4及以上会有这个bug：页面的input唤醒软键盘再收起后，页面会出现软键盘高度的空白背景，触摸到滚动条会消失恢复！

解决代码

后台框架嵌入iframe的情景，iframe内部页面输入框唤醒软键盘，控制顶层window滚动

`

var wechatInfo = navigator.userAgent.match(/MicroMessenger/([\d.]+)/i);

if(wechatInfo){

$("input,textarea").blur(function(){

var currentPosition,timer;

var speed=1;//页面滚动距离

timer = setInterval(function(){

currentPosition = $('window.top').scrollTop();

currentPosition-=speed;

window.top.scrollTo(0,currentPosition);//页面向上滚动

currentPosition+=speed; //speed变量

window.top.scrollTo(0,currentPosition);//页面向下滚动

clearInterval(timer);

},1);

})

}

### 普通页面

if (browser.versions.mobile) {//判断是否是移动设备打开。browser代码在下面

var ua = navigator.userAgent.toLowerCase();//获取判断用的对象

if (ua.match(/MicroMessenger/i) == "micromessenger") {

//在微信中打开

$("input,textarea").blur(function(){

var currentPosition,timer;

var speed=1;//页面滚动距离

timer=setInterval(function(){

currentPosition=document.documentElement.scrollTop || document.body.scrollTop;

currentPosition-=speed;

window.scrollTo(0,currentPosition);//页面向上滚动

currentPosition+=speed; //speed变量

window.scrollTo(0,currentPosition);//页面向下滚动

clearInterval(timer);

},1);

})

}

}

`