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却没有这个问题，后面会介绍处理的方式。