H5移动端弹出键盘时遮挡输入框

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

 

  • 0
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值