前言:H5 有时底部按钮是固定定位,当页面上面需要用到输入内容时,会弹起软键盘,然后把底部固定的按钮也弹起来了,我们希望弹起软键盘时,底部的固定定位按钮隐藏,这里就需要对移动端软键盘弹起收起进行监听。
1. Android端
// 控制整个按钮底部的显示与隐藏const [hideBottom, setHideBottom] = useState<boolean>(false);useEffect(() => {// 原窗口高度 const originalHeight = document.documentElement.clientHeight || document.body.clientHeight;window.addEventListener('resize', () => {//键盘弹起与隐藏都会引起窗口的高度发生变化const resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;if (resizeHeight - 0 < originalHeight - 0) {//当软键盘弹起,在此处操作setHideBottom(true);} else {//当软键盘收起,在此处操作setHideBottom(false);}});}, []);
OR
// 控制整个按钮底部的显示与隐藏const [hideBottom, setHideBottom] = useState<boolean>(false);useEffect(() => {// 原窗口高度const originalHeight = document.documentElement.clientHeight || document.body.clientHeight;window.onresize = () => {//键盘弹起与隐藏都会引起窗口的高度发生变化const resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;if (resizeHeight - 0 < originalHeight - 0) {//当软键盘弹起,在此处操作setHideBottom(true);} else {//当软键盘收起,在此处操作setHideBottom(false);}};}, []);
2. IOS端
// 控制整个按钮底部的显示与隐藏const [hideBottom, setHideBottom] = useState<boolean>(false);useEffect(() => {document.body.addEventListener('focusin', () => {//软键盘弹出的事件处理setHideBottom(true);});document.body.addEventListener('focusout', () => {//软键盘收起的事件处理setHideBottom(false);});}, []);
3. 融合终极办法
// utils.tsexport const monitorSoftKeyboard = callback => {// 1. Android系统const originalHeight = document.documentElement.clientHeight || document.body.clientHeight;window.addEventListener('resize', () => {//键盘弹起与隐藏都会引起窗口的高度发生变化const resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;if (resizeHeight - 0 < originalHeight - 0) {//当软键盘弹起,在此处操作callback(true);} else {//当软键盘收起,在此处操作callback(false);}});// 2. IOS系统(兼容)document.body.addEventListener('focusin', () => {//软键盘弹出的事件处理callback(true);});document.body.addEventListener('focusout', () => {//软键盘收起的事件处理callback(false);});};// page// 控制整个按钮底部的显示与隐藏const [hideBottom, setHideBottom] = useState<boolean>(false);useEffect(() => {monitorSoftKeyboard(isUp => {if (isUp) {setHideBottom(true);} else {setHideBottom(false);}});}, []);