我写文章的目的主要是做个记录和锻炼自己的写作能力，而且我入门前端时间比较短，如果有什么问题，欢迎指教！
最近开发H5应用，遇到了Android键盘把固定元素顶起的问题。我的页面底部固定了几个元素，使用的是 fixed 定位，在iOS这边没有问题，但是在android端，一旦用户输入的时候，键盘就会把元素向上顶。
通过调试发现，键盘弹起的时候整个window的高度都会变化，所以采用fixed也无效。所以，我考虑的就是监听键盘的弹出，然后当键盘弹起的时候隐藏底部元素，键盘收起的时候将元素显示出来。
这个方法试验是可行的，但是目前有多个页面，如果每个页面都要监听一遍，就会重复很多无用的代码。因为我使用的react开发，那么使用一个通用的组件做这件事情就好。
- 首先定义一个通用组件，用来包裹需要显示的底部元素
export const PageBottom: React.FC<{
children: ReactChild | ReactChild[];}> = (props) => {
return <div className="page-bottom">
{
props.children
}
</div>
}
- 然后添加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")
}
}
}
结论： 我目前使用这个方法可以很好的解决我的问题，不知道对于这个问题，有没有更好的解决方案
