移动端h5页面监听键盘的展开与收起

移动端h5页面监听键盘的展开与收起，android和ios系统的判断略有区别

andord系统监听

android系统通过监听网页的resize事件可以判断，测试发现在手机浏览器中网页全屏状态监听是不起作用的，但在微信中是可以的

const originHeight = document.documentElement.clientHeight || document.body.clientHeight
window.addEventListener('resize', () => {
  var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight
  if (resizeHeight < originHeight) {
    console.log('弹出键盘')
  } else {
    console.log('收起键盘')
  }
}, false)

ios系统监听

ios系统中不能通过resize事件判断，android系统通过此方式判断时，点击键盘上面的收起按钮会监听不到

const isIos = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
document.body.addEventListener('focusin', () => {
    if (isIos) {
       console.log('弹出键盘')
    }
})
document.body.addEventListener('focusout', () => {
    if (isIos) {
       console.log('收起键盘')
    }
})