记一次,解决移动端文本框弹出键盘遮挡输入框的方法:
document.activeElement.scrollIntoViewIfNeeded();
方法用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。 如果该元素已经在浏览器窗口的可见区域内,则不会发生滚动。
使用方法:
var input= document.getElementById("input");
input.scrollIntoViewIfNeeded();
等同于input.scrollIntoViewIfNeeded(true);
如果为true,则元素将在其所在滚动区的可视区域中居中对齐。
如果为false,则元素将与其所在滚动区的可视区域最近的边缘对齐。 根据可见区域最靠近元素的哪个边缘,元素的顶部将与可见区域的顶部边缘对准,或者元素的底部边缘将与可见区域的底部边缘对准。
延时一定时间重新定位输入框。
点击输入框时加长body元素高度到9999px(当然不一定非要这么高),页面滚动到空白区域,再生成输入框添加在当前一屏页面的最顶端。
借助元素的 scrollIntoViewIfNeeded() 方法。这个方法执行后如果当前元素在视口中不可见,则会滚动浏览器窗口或容器元素,最终让它可见。如果当前元素在视口中已经是可见的,这个方法什么也不做。
页面跳转或者显示隐藏(无疑是最简单的,但是可能不能满足产品的要求,或者有点low,但是网页版的微博就是如此)。