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卻沒有這個問題，后面會介紹處理的方式。