关于ios中碰到的软键盘弹出，导致的底部输入框定位出现问题的解决方案
背景
目前正在做IM相关的H5页面，碰到了ios下软键盘弹出，底部fixed失效的问题。在ios下，body的高度不会随着软键盘的弹出而变小，所以顶部和底部的fixed元素位置都变得不正确了。要解决苹果输入框弹起被软键盘遮住的问题，切记不能使用传统的fixed或者absolute布局，根本解决不了输入框被遮住的问题。网上看了很多的解决办法都没有实现。
解决方案
首先采用flex布局来定位头部，中间和底部
<div class="con">
<div class="top">头部固定</div>
<div class="content">中间内容区域</div>
<div class="bottom">底部输入框: <input focus="focus" blur="blur" /></div>
</div>
.con{
display:flex;
}
.top,.bottom{
height:50px;
}
.content{
flex: 1 auto;
overflow:auto;
}
先看一下在不同ios版本中，软键盘弹出后输入框的位置
| ios版本 | 表现 |
|---|---|
| 10 | 输入框顶到了软键盘之上 |
| 11 | 输入框顶到了软键盘以上 |
| 12 | 输入框位置并没有发生改变 |
思路是这样的：
- 当输入框focus的时候，调用getBoundingClientRect方法获取矩形信息
- 延时100毫秒后，再次调用getBoundingClientRect方法获取矩形信息
- 两次信息的top值做一个差值，如果>0则表示输入框已经在软键盘之上
- top的差值===0,则表示输入框的位置没有发生改变，这里调用元素的scrollIntoView方法来强制使得输入框滚动到可视区，之后再通过getBoundingClientRect来获取矩阵信息，计算两次top的差值得到软键盘的高度。
- 随后设置body的height = window.innerHeight - 软键盘高度
- 再次调用输入框的scrollIntoView(false);
- 当输入框blur的时候，重新设置body的height即可
{
focus:(e){
const originRect = e.target.getBoundingClientRect();
const isFirst = false;
setTimeout(()=>{
let rect = e.target.getBoundingClientRect();
if(isFirst){
if(rect.top - originRect.top<0){
// todo 设置body的height
document.body.style.height = window.innerHeight - (originRect.top - rect.top) + "px";
e.target.scrollIntoView(false);
return;
}
}
e.target.scrollIntoView(false);
setTimeout(()=>{
rect = e.target.getBoundingClientRect();
// 某些机型下，得到的top为负值，直接使用window.innerHeight
if(rect.top>0){
document.body.style.height = window.innerHeight + "px";
}else{
document.body.style.height = window.innerHeight - (originRect.top - rect.top) + "px";
}
e.target.scrollIntoView(false);
},100);
isFirst = false;
},100);
},
blur:(){
document.body.style.height = "100%";
}
}
问题解决，如有问题，可以邮件给我（nick121212@126.com）
