需求描述:react技术栈,移动端实现一个H5表单网页,采用的是flex弹性布局,表单填写区域在上,提交按钮在固定在底部。
这种场景下,一定会遇到以下两个坑:
- 点击输入框,获取焦点事件后,手机输入键盘弹起,总是会把底部按钮顶上去。
- 如果输入框在页面下面的位置,键盘弹起后,会遮挡住要输入的区域,只有开始输入的时候才会滚动到输入的位置,用户体验非常不好。
-
解决以上两个坑:具体看代码
//在组件的did生命周期函数中加入
componentDidMount() {
// 内容区高度
const h = document.body.scrollHeight;
//监听页面尺寸变化
window.addEventListener("resize", function () {
// 解决键盘弹起后遮挡输入框的问题
if (document.activeElement.tagName == "INPUT" || document.activeElement.tagName == "TEXTAREA") {
window.setTimeout(function () {
document.activeElement.scrollIntoViewIfNeeded();
}, 0);
}
//解决键盘弹起把固定在底部的按钮顶上去的问题
//btnSubmit是按钮区域的的节点id
const bottomBtn = document.querySelector("#btnSubmit");
if (document.body.scrollHeight < h) {
bottomBtn.style.display = "none";
} else {
bottomBtn.style.display = "block";
}
}
以上代码比较简单,但是基本上能够轻松解决这两个坑,特做记录。