修复苹果iOS 原生键盘遮挡input框

最近在做一个仿微信的聊天界面，有一个固定在页面底部的input框，本来使用fixed定位在底部，在android手机上没有任何问题，但在iOS上当点击输入内容的时候会出现不同情况的原生键盘遮挡输入框的情况。度娘出了很多解决方法，但没有一个方法可以完美解决，而且发现很多人都有这个问题，自己就苦思冥想出了一个相对不错的解决方法，跟大家分享一下。

先跟大家列举一下网上的解决方法，还有我的实践结果

position

// 修改position:fixed; 为position:absolute;
// position:fixed;
position:absolute;
复制代码

实践证明没有任何影响，就算不使用定位也会出现遮挡输入框的情况

scrollTop

setTimeout(function(){document.body.scrollTop = document.body.scrollHeight;
},300)
复制代码

这种方法在iOS10上可以解决遮挡的问题，但在iOS11上会出现键盘先将输入框顶上去然后输入框又快速回到屏幕底部再次被遮挡的情况

scrollIntoView scrollIntoViewIfNeeded

这两种方法完全看不出任何效果

我的解决方法

直接上代码

// css
.mainBox{height:100vh;position:relative;
}
.inputBox{position:absolute;bottom:0;
}
// 输入框获得焦点事件
onFocus() {setTimeout(function(){// 设置body的高度为可视高度+302// 302为原生键盘的高度document.getElementsByTagName('body')[0].style.height = (window.innerHeight + 302) + 'px';document.body.scrollTop = 302;}, 300)
}
// 输入框失去焦点事件
onBlur() {// 设置body恢复原来的高度document.getElementsByTagName('body')[0].style.height = window.innerHeight + 'px';
}
复制代码

这种方法相当于给body增加一个键盘的高度，正好可以占掉键盘的位置，把页面内容顶上去，然后还要阻止一个body的滚动事件，防止用户滑动页面把增加的302的白页面滚动出来。（因为手边没有iPhone X手机，所以在iPhone X上兼容可能是不太完美，不过也就只是键盘的高度不同。可以通过判断手机型号设置不同高度的方式解决）

302虽然看起来不靠谱，但现在苹果的大小屏手机原生键盘都是这个高度（目前测试在5s、7p、8没有问题），现在来说没有多大问题。也正在寻找更加完善的方法，结果出来再跟大家分享。别的输入法也正在想办法解决，有好的解决办法的欢迎一起交流学习

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