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

//這裏區分不一樣系統，能夠參考以前的文檔記錄 http://www.javashuo.com/article/p-qyvmkrxy-ke.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; }

 

一、在ios中軟鍵盤彈起時，僅會引發$(‘body’).scrollTop值改變，可是咱們能夠經過輸入框的獲取焦點狀況來作判斷，但也只能在ios中採用這個方案，

由於在android中存在主動收起鍵盤後，但輸入框並無失焦，而ios中鍵盤收起後就會失焦；

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