android ios 键盘弹出

android ios 键盘弹出

有时在页面的特殊布局情况下，需要对输入键盘的弹出和收起做判断。
android可以用clientHeight高度来判断键盘的弹出和收起，但是ios却不行，ios可以利用focusin和focusout这两个事件冒泡到body元素上，来判断键盘的弹出和收起，focus和blur可不行，因为他们不会冒泡到body上。

android专用方法

var isAndroid = navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Adr') > -1;
	var isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
	if(isAndroid) {
		//获取原窗口的高度
		var originalHeight=document.documentElement.clientHeight ||document.body.clientHeight;
		window.onresize=function(){
			//键盘弹起与隐藏都会引起窗口的高度发生变化
			var resizeHeight=document.documentElement.clientHeight || document.body.clientHeight;
      if(resizeHeight-0<originalHeight-0){
      //当软键盘弹起，在此处操作
      alert('键盘弹起');
      }else{
      //当软键盘收起，在此处操作
      alert('键盘收起');
      }
		}
	}

android和ios通用方法

document.body.addEventListener('focusin', () => {
  //软键盘弹出的事件处理
  if(isiOS) {
    alert('ios键盘弹起');
  }
  if(isAndroid) {
    alert('android键盘弹起');
  }
})
document.body.addEventListener('focusout', () => {
  //软键盘收起的事件处理
  if(isiOS) {
    alert('ios键盘收起');
  }
  if(isAndroid) {
    alert('android键盘收起');
  }
})