移动端h5监听键盘弹出和收起

 约 2 分钟
  1. 在ios中软键盘弹起时,仅会引起 $('body').scrollTop 值改变,但是我们可以通过输入框的获取焦点情况来做判断,但也只能在ios中采用这个方案,因为在android中存在主动收起键盘后,但输入框并没有失焦,而ios中键盘收起后就会失焦;
  2. 在android中软键盘弹起或收起时,会改变window的高度,因此监听window的 onresize 事件;

一、Android端监听

//获取原窗口的高度
let originalHeight = document.documentElement.clientHeight || document.body.clientHeight
window.οnresize = function() {
  //键盘弹起与隐藏都会引起窗口的高度发生变化
  let resizeHeight = document.documentElement.clientHeight || document.body.clientHeight
  if (resizeHeight < originalHeight) {
    //当键盘弹起,在此处操作
  } else {
    //当键盘收起,在此处操作
  }
}

二、IOS端监听

/**
 * 二、ios
 * 
 * focusin和focusout支持冒泡,对应focus和blur, 
 * 使用focusin和focusout的原因是focusin和focusout可以冒泡,focus和blur不会冒泡,
 * 这样就可以使用事件代理,处理多个输入框存在的情况。
 */
if (isIos) {
  document.body.addEventListener('focusin', () => {
    //软键盘弹出的事件处理
  })
  document.body.addEventListener('focusout', () => {
    //软键盘收起的事件处理
  })
}
阅读 972

推荐阅读
漫漫前端路
用户专栏

热爱前端,学习、交流和分享前端技术,总结项目中出现的问题。前端攻城狮的升级之路。

6 人关注
26 篇文章
专栏主页
目录