我寫文章的目的主要是做個記錄和鍛煉自己的寫作能力，而且我入門前端時間比較短，如果有什么問題，歡迎指教！

最近開發(fā)H5應(yīng)用，遇到了Android鍵盤把固定元素頂起的問題。我的頁面底部固定了幾個元素，使用的是 fixed 定位，在iOS這邊沒有問題，但是在android端，一旦用戶輸入的時候，鍵盤就會把元素向上頂。

通過調(diào)試發(fā)現(xiàn)，鍵盤彈起的時候整個window的高度都會變化，所以采用fixed也無效。所以，我考慮的就是監(jiān)聽鍵盤的彈出，然后當(dāng)鍵盤彈起的時候隱藏底部元素，鍵盤收起的時候?qū)⒃仫@示出來。

這個方法試驗是可行的，但是目前有多個頁面，如果每個頁面都要監(jiān)聽一遍，就會重復(fù)很多無用的代碼。因為我使用的react開發(fā)，那么使用一個通用的組件做這件事情就好。

• 首先定義一個通用組件，用來包裹需要顯示的底部元素

export const PageBottom: React.FC<{
  children: ReactChild | ReactChild[];}> = (props) => {
 return <div className="page-bottom">
    {
      props.children
    }
  </div>
}

• 然后添加css 代碼

.board-show .page-bottom {
  display: none;   
}

• 然后監(jiān)聽鍵盤的變化，同鍵盤的彈起和收起，來修改root元素的class。

// 在應(yīng)用的index 文件里面調(diào)用這個方法
function listenKeybordAndroid() {
  const originHeight = document.documentElement.clientHeight || document.body.clientHeight;
  const root = document.querySelector("#root");
  window.onresize = function () {
    // 鍵盤彈起與隱藏都會引起窗口的高度發(fā)生變化
    let resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
    if (resizeHeight < originHeight) {
      // 當(dāng)軟鍵盤彈起，在此處操作
      root?.classList.add("board-show");
    } else {
      // 當(dāng)軟鍵盤收起，在此處操作
      root?.classList.remove("board-show")
    }
  }
}

結(jié)論： 我目前使用這個方法可以很好的解決我的問題，不知道對于這個問題，有沒有更好的解決方案