ios页面键盘消失页面不回弹问题
在ios移动端页面进行表单输入会遇到一个Bug,就是当对输入框进行输入,唤出键盘时,键盘会将页面顶起一段距离。但是当输入完成,隐藏键盘后,页面并不会回弹,就会留出一大片空白。
解决思路:
发现有空白的时候把页面滚动一下,就会恢复正常,所以就用JS在输入结束后,帮用户稍稍滚动一下屏幕。
如果之前能记录下页面滚动的高度,就在此基础上移动1px ,如果没有记录,就直接滚动到顶端,用户不会有什么感知。
代码:
var u = navigator.userAgent;
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if(isiOS){
document.body.addEventListener('focusout', function(){
setTimeout(function(){
var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
window.scrollTo(0, Math.max(scrollHeight - 1, 0));
}, 100);
});
}