移动端键盘收起后,页面样式不恢复的问题

解决方案:在点击按钮那里或者是input失去焦点时加下面其中一个即可解决。 通过scrollTop滚动来解决。

scrollTop

$("input").blur(function () {
   $("html,body").animate({scrollTop: document.documentElement.clientHeight},500);
});

或者是scrollTo

//滚动到顶部
window.scrollTo(0, 0);
//滚动到底部
window.scrollTo(0, document.documentElement.clientHeight); 

完美解决方案: 无bug(根据当前滚动条的位置来计算,失去焦点后,重新让滚动条滚动到之前的位置,太完美了)

解决方案:给输入框(或select选择框)添加失去焦点的事件,当输入框失去焦点,页面自动滚动到顶部,并且需要加定时器,否则偶尔会失效。

$("input").blur(function () {
        setTimeout(function() {
                var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
                window.scrollTo(0, Math.max(scrollHeight - 1, 0));
        }, 100);
    });
IOS上微信在输入框弹出键盘后,页面不恢复,下方有留白

二.  打开软键盘 页面底部被顶起解决 方法

 

你可能感兴趣的:(移动端键盘收起后,页面样式不恢复的问题)