前言：H5 有時(shí)底部按鈕是固定定位，當(dāng)頁(yè)面上面需要用到輸入內(nèi)容時(shí)，會(huì)彈起軟鍵盤(pán)，然后把底部固定的按鈕也彈起來(lái)了，我們希望彈起軟鍵盤(pán)時(shí)，底部的固定定位按鈕隱藏，這里就需要對(duì)移動(dòng)端軟鍵盤(pán)彈起收起進(jìn)行監(jiān)聽(tīng)。

1. Android端

// 控制整個(gè)按鈕底部的顯示與隱藏const [hideBottom, setHideBottom] = useState<boolean>(false);useEffect(() => {// 原窗口高度 const originalHeight = document.documentElement.clientHeight || document.body.clientHeight;window.addEventListener('resize', () => {//鍵盤(pán)彈起與隱藏都會(huì)引起窗口的高度發(fā)生變化const resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;if (resizeHeight - 0 < originalHeight - 0) {//當(dāng)軟鍵盤(pán)彈起，在此處操作setHideBottom(true);} else {//當(dāng)軟鍵盤(pán)收起，在此處操作setHideBottom(false);}});}, []);

OR

// 控制整個(gè)按鈕底部的顯示與隱藏 const [hideBottom, setHideBottom] = useState<boolean>(false);useEffect(() => {// 原窗口高度const originalHeight = document.documentElement.clientHeight || document.body.clientHeight;window.onresize = () => {//鍵盤(pán)彈起與隱藏都會(huì)引起窗口的高度發(fā)生變化const resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;if (resizeHeight - 0 < originalHeight - 0) {//當(dāng)軟鍵盤(pán)彈起，在此處操作setHideBottom(true);} else {//當(dāng)軟鍵盤(pán)收起，在此處操作setHideBottom(false);}}; }, []);

2. IOS端

// 控制整個(gè)按鈕底部的顯示與隱藏const [hideBottom, setHideBottom] = useState<boolean>(false);useEffect(() => {document.body.addEventListener('focusin', () => {//軟鍵盤(pán)彈出的事件處理setHideBottom(true);});document.body.addEventListener('focusout', () => {//軟鍵盤(pán)收起的事件處理setHideBottom(false);});}, []);

3. 融合終極辦法

// utils.ts export const monitorSoftKeyboard = callback => {// 1. Android系統(tǒng)const originalHeight = document.documentElement.clientHeight || document.body.clientHeight;window.addEventListener('resize', () => {//鍵盤(pán)彈起與隱藏都會(huì)引起窗口的高度發(fā)生變化const resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;if (resizeHeight - 0 < originalHeight - 0) {//當(dāng)軟鍵盤(pán)彈起，在此處操作callback(true);} else {//當(dāng)軟鍵盤(pán)收起，在此處操作callback(false);}});// 2. IOS系統(tǒng)(兼容)document.body.addEventListener('focusin', () => {//軟鍵盤(pán)彈出的事件處理callback(true);});document.body.addEventListener('focusout', () => {//軟鍵盤(pán)收起的事件處理callback(false);}); };// page // 控制整個(gè)按鈕底部的顯示與隱藏 const [hideBottom, setHideBottom] = useState<boolean>(false);useEffect(() => {monitorSoftKeyboard(isUp => {if (isUp) {setHideBottom(true);} else {setHideBottom(false);}}); }, []);

解釋

在android中軟鍵盤(pán)彈起或收起時(shí)，會(huì)改變window的高度，因此監(jiān)聽(tīng)window的onresize事件；但是 ios 中軟鍵盤(pán)的彈起收起并不觸發(fā) window.onresize 事件；

在 ios 中軟鍵盤(pán)彈起時(shí)，僅會(huì)引起 scrollTop 值改變，但是我們可以通過(guò)輸入框的獲取焦點(diǎn)情況來(lái)做判斷，但也只能在 ios 中采用這個(gè)方案，因?yàn)樵?android 中存在主動(dòng)收起鍵盤(pán)后，但輸入框并沒(méi)有失焦，而ios中鍵盤(pán)收起后就會(huì)失焦

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。