关于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）