前言：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.ts export 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);}}); }, []);

解釋

在android中軟鍵盤彈起或收起時，會改變window的高度，因此監聽window的onresize事件；但是 ios 中軟鍵盤的彈起收起并不觸發 window.onresize 事件；

在 ios 中軟鍵盤彈起時，僅會引起 scrollTop 值改變，但是我們可以通過輸入框的獲取焦點情況來做判斷，但也只能在 ios 中采用這個方案，因為在 android 中存在主動收起鍵盤后，但輸入框并沒有失焦，而ios中鍵盤收起后就會失焦

另外，focusin和focusout支持冒泡，對應focus和blur, 使用focusin和focusout的原因是focusin和focusout可以冒泡，focus和blur不會冒泡，這樣就可以使用事件代理，處理多個輸入框存在的情況。

總結

以上是生活随笔為你收集整理的H5 (React) 移动端监听软键盘弹起、收起的全部內容，希望文章能夠幫你解決所遇到的問題。

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