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

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

通過調試發現，鍵盤彈起的時候整個window的高度都會變化，所以采用fixed也無效。所以，我考慮的就是監聽鍵盤的彈出，然后當鍵盤彈起的時候隱藏底部元素，鍵盤收起的時候將元素顯示出來。

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

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

export const PageBottom: React.FC

children: ReactChild | ReactChild[];}> = (props) => {

return

{

props.children

}

}

然后添加css 代碼

.board-show .page-bottom {

display: none;

}

然后監聽鍵盤的變化，同鍵盤的彈起和收起，來修改root元素的class。

// 在應用的index 文件里面調用這個方法

function listenKeybordAndroid() {

const originHeight = document.documentElement.clientHeight || document.body.clientHeight;

const root = document.querySelector("#root");

window.onresize = function () {

// 鍵盤彈起與隱藏都會引起窗口的高度發生變化

let resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;

if (resizeHeight < originHeight) {

// 當軟鍵盤彈起，在此處操作

root?.classList.add("board-show");

} else {

// 當軟鍵盤收起，在此處操作

root?.classList.remove("board-show")

}

}

}

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

總結

以上是生活随笔為你收集整理的h5 android 按钮键盘,【前端】Android 键盘顶起H5元素的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。