Input被软键盘遮住

在业务开发过程中，移动端输入框被软键盘遮住的情况还是很容易出现的。在不同手机不同系统都有可能出现。

网上也有很多解决办法，比如计算高度然后scroll到某个地方、调用scrollIntoView，、scrollIntoViewIfNeeded、监听window的resize方法、定位fixed。方法有很多。

这边提一下踩过的坑，如果是scrollIntoView和scrollIntoViewIfNeeded，在移动端会有不兼容的情况。如果是计算scroll，在定位fixed弹窗上滚动不了。这是本人遇见的情况，可能有解决方法，但是没去研究。

最简单的方法是使用定位。在聚焦的时候给这个输入框添加定位fixed，然后设置bottom 0。因为软键盘弹出之后对于可视窗口来说是要扣除软键盘的高度。这个方法很简单，但是会出现一点小问题，那就是安卓手机使用自带返回键的时候input还是聚焦状态。

同样的，也是样式定位，但是监听window的resize：

$(window).resize(function() { });

因为软键盘弹出之后，可视窗口大小就变了，会触发resize事件，然后在resize里面判断。先判断当前可视窗口是否小于原来的可视窗口（初始化页面的时候就初始化一个原来可视窗口的高度），然后判断当前input是否是聚焦状态，

document.getElementById('detail') == document.activeElement detail是不希望遮住的input输入框ID。如果两个条件成立：

$('.address-detail').css({position: 'fixed', bottom: 0}); 否则：

$('.address-detail').css({position: ''});

这个方法简单是简单，但是不够完善，因为我们输入框在上面的可以不需要去操作什么，如果有很多歌input需要使用这个方法，那么就要循环去判断，不过暂时没遇见很多歌input元素使用的情况，所以没去研究。

欢迎关注Coding个人笔记 公众号

转载于:https://juejin.im/post/5c540e9ee51d457f963d0649