關(guān)于ios中碰到的軟鍵盤彈出，導(dǎo)致的底部輸入框定位出現(xiàn)問題的解決方案

背景

目前正在做IM相關(guān)的H5頁面，碰到了ios下軟鍵盤彈出，底部fixed失效的問題。在ios下，body的高度不會隨著軟鍵盤的彈出而變小，所以頂部和底部的fixed元素位置都變得不正確了。要解決蘋果輸入框彈起被軟鍵盤遮住的問題，切記不能使用傳統(tǒng)的fixed或者absolute布局，根本解決不了輸入框被遮住的問題。網(wǎng)上看了很多的解決辦法都沒有實現(xiàn)。

解決方案

首先采用flex布局來定位頭部，中間和底部

<div class="con">
 <div class="top">頭部固定</div>
 <div class="content">中間內(nèi)容區(qū)域</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版本中，軟鍵盤彈出后輸入框的位置

思路是這樣的：

• 當(dāng)輸入框focus的時候，調(diào)用getBoundingClientRect方法獲取矩形信息
• 延時100毫秒后，再次調(diào)用getBoundingClientRect方法獲取矩形信息
• 兩次信息的top值做一個差值，如果>0則表示輸入框已經(jīng)在軟鍵盤之上
• top的差值===0,則表示輸入框的位置沒有發(fā)生改變，這里調(diào)用元素的scrollIntoView方法來強制使得輸入框滾動到可視區(qū)，之后再通過getBoundingClientRect來獲取矩陣信息，計算兩次top的差值得到軟鍵盤的高度。
• 隨后設(shè)置body的height = window.innerHeight - 軟鍵盤高度
• 再次調(diào)用輸入框的scrollIntoView(false);
• 當(dāng)輸入框blur的時候，重新設(shè)置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 設(shè)置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為負(fù)值，直接使用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）