js 監聽手機端鍵盤彈出和收起事件

//這里區分不同系統，可以參考之前的文檔記錄 https://www.cnblogs.com/wind-wang/p/10737110.html

const ua = typeof window === 'object' ? window.navigator.userAgent : ''; let _isIOS = -1; let _isAndroid = -1;  export function isIOS() { if (_isIOS === -1) { _isIOS = /iPhone|iPod|iPad/i.test(ua) ? 1 : 0; } return _isIOS === 1; } export function isAndroid() { if (_isAndroid === -1) { _isAndroid = /Android/i.test(ua) ? 1 : 0; } return _isAndroid === 1; }

 

1、在ios中軟鍵盤彈起時，僅會引起$(‘body’).scrollTop值改變，但是我們可以通過輸入框的獲取焦點情況來做判斷，但也只能在ios中采用這個方案，

因為在android中存在主動收起鍵盤后，但輸入框並沒有失焦，而ios中鍵盤收起后就會失焦；

2、在android中軟鍵盤彈起或收起時，會改變window的高度，因此監聽window的onresize事件；
 

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

if (isAndroid()) { const innerHeight = window.innerHeight; window.addEventListener('resize', () => { const newInnerHeight = window.innerHeight; if (innerHeight > newInnerHeight) { // 鍵盤彈出事件處理
      alert("android 鍵盤彈窗事件");  } else { // 鍵盤收起事件處理
      alert("android 鍵盤收起事件處理") } }); } else if (isIOS()) { window.addEventListener('focusin', () => { // 鍵盤彈出事件處理
    alert("iphone 鍵盤彈出事件處理") }); window.addEventListener('focusout', () => { // 鍵盤收起事件處理
    alert("iphone 鍵盤收起事件處理")  }); }

//如果需要移除監聽事件可以使用removeEventListener，但如果監聽事件中使用的函數是匿名函數，可能移除事件沒有任何效果，
可以將監聽事件執行的函數，提取出來，使用函數名來指定
例如:
    window.addEventListener('focusout', focusoutFunc);

    function focusoutFunc (){
       /*.....*/
    }
    
    window.removeEventListener('focusout', focusoutFunc);  //移除事件
    

 

 處理完鍵盤彈出和收起事件后，會發現在ios中鍵盤收起時，頁面內容留白不下滑，滑動下，又恢復正常。android卻沒有這個問題，后面會介紹處理的方式。