h5監聽手機鍵盤彈起

~國王 發表於 2020-11-20

h5監聽手機鍵盤彈起

ua=window.navigator.userAgent.toLocaleLowerCase();
isIos=/iphone|ipad|ipod/.test(ua)
isAndroid=/android/.test(ua)


// ------android-------
//獲取原視窗的高度
var originalHeight=document.documentElement.clientHeight ||document.body.clientHeight;
window.onresize=function(){
	//鍵盤彈起與隱藏都會引發視窗高度發生變化
	var resizeHeight=document.documentElement.clientHeight || document.body.clientHeight;
	if(resizeHeight-0<originalHeight-0){
		//鍵盤彈出,to do something
		
	}else{
		//鍵盤收起,to do something
		
	}
}

// ------ios------
//focusin和focusout可以冒泡,focus和blur不會冒泡
 document.body.addEventListener('focusin', () => {
  //鍵盤彈出
   if(isIos){
	// to do something
   }
})
document.body.addEventListener('focusout', () => {
    //鍵盤收起
     if(isIos){
	// to do something
     }
 })