我寫文章的目的主要是做個(gè)記錄和鍛煉自己的寫作能力劲阎，而且我入門前端時(shí)間比較短拙徽，如果有什么問(wèn)題刨沦，歡迎指教！
最近開發(fā)H5應(yīng)用膘怕，遇到了Android鍵盤把固定元素頂起的問(wèn)題想诅。我的頁(yè)面底部固定了幾個(gè)元素，使用的是 fixed 定位，在iOS這邊沒(méi)有問(wèn)題来破，但是在android端篮灼，一旦用戶輸入的時(shí)候，鍵盤就會(huì)把元素向上頂徘禁。
通過(guò)調(diào)試發(fā)現(xiàn)诅诱，鍵盤彈起的時(shí)候整個(gè)window的高度都會(huì)變化，所以采用fixed也無(wú)效送朱。所以娘荡，我考慮的就是監(jiān)聽(tīng)鍵盤的彈出，然后當(dāng)鍵盤彈起的時(shí)候隱藏底部元素驶沼，鍵盤收起的時(shí)候?qū)⒃仫@示出來(lái)炮沐。
這個(gè)方法試驗(yàn)是可行的，但是目前有多個(gè)頁(yè)面回怜，如果每個(gè)頁(yè)面都要監(jiān)聽(tīng)一遍大年，就會(huì)重復(fù)很多無(wú)用的代碼。因?yàn)槲沂褂玫膔eact開發(fā)玉雾，那么使用一個(gè)通用的組件做這件事情就好鲜戒。
- 首先定義一個(gè)通用組件，用來(lái)包裹需要顯示的底部元素
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)聽(tīng)鍵盤的變化抹凳，同鍵盤的彈起和收起遏餐，來(lái)修改root元素的class。
// 在應(yīng)用的index 文件里面調(diào)用這個(gè)方法
function listenKeybordAndroid() {
const originHeight = document.documentElement.clientHeight || document.body.clientHeight;
const root = document.querySelector("#root");
window.onresize = function () {
// 鍵盤彈起與隱藏都會(huì)引起窗口的高度發(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é)論： 我目前使用這個(gè)方法可以很好的解決我的問(wèn)題，不知道對(duì)于這個(gè)問(wèn)題幸冻，有沒(méi)有更好的解決方案
