在微信中,点击输入框唤起ios软键盘,输入完成后在键盘撑起的地方会有一大块空白,有时候还会出现点击错位
下面是解决方案:
//input输入框弹起软键盘的解决方案。
var bfscrolltop = document.body.scrollTop;
$("input").focus(function () {
document.body.scrollTop = document.body.scrollHeight;
//console.log(document.body.scrollTop);
}).blur(function () {
document.body.scrollTop = bfscrolltop;
//console.log(document.body.scrollTop);
});
//select输入框弹起软键盘的解决方案。
$("select").focus(function () {
document.body.scrollTop = document.body.scrollHeight;
//console.log(document.body.scrollTop);
}).blur(function () {
document.body.scrollTop = bfscrolltop;
//console.log(document.body.scrollTop);
});
//textarea输入框弹起软键盘的解决方案。
$("textarea").focus(function () {
document.body.scrollTop = document.body.scrollHeight;
//console.log(document.body.scrollTop);
}).blur(function () {
document.body.scrollTop = bfscrolltop;
//console.log(document.body.scrollTop);
});
调用下边的方法:
//失焦之后页面滚动一下
temporaryRepair(){
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);
}