js 监听手机端键盘弹出和收起事件

Posted 2021-02-17 折翼的飞鸟

//这里区分不同系统，可以参考之前的文档记录 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却没有这个问题，后面会介绍处理的方式。