js 移动端对键盘监听

iphoneX 微信页面下 拉起键盘后关闭键盘,原键盘区域还存在

解决办法

js 没有办法对手机软键盘直接进行监听的

那是否可以对 input 失去焦点进行监听
搜一了一个MDN Web 文档,发现
focus 和 blur 不会冒泡,而 focusin 和 focusout 可以支持冒泡,加事件代理,当触发 focusout 事件后滚一下

window.addEventListener('focusout', () => {
  window.scrollTo(0, 0);
});

测试后发现 ios 可以监听到 focusout 事件,而 android 在键盘收起后,input 仍处于焦点状态,无法触发 focusout 事件
添加 resize 事件后 发现 android 在唤起键盘收起键盘后 window.innerHeight 会有改变,而 ios 不会

js 移动端对键盘监听

if (/Android/gi.test(navigator.userAgent)) {
  const innerHeight = window.innerHeight;
  window.addEventListener('resize', () => {
    const newInnerHeight = window.innerHeight;
    if (innerHeight > newInnerHeight) {
      // 键盘弹出事件处理
    } else {
      // 键盘收起事件处理
    }
  });
} else {
  window.addEventListener('focusin', () => {
    // 键盘弹出事件处理
  });
  window.addEventListener('focusout', () => {
    // 键盘收起事件处理
  });
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,526评论 1 11
  • 总结: 鼠标事件 1.click与dbclick事件$ele.click()$ele.click(handler(...
    阿r阿r阅读 1,628评论 2 10
  • 本篇博客源地址 总结: 鼠标事件 1.click与dbclick事件ele.click()ele.click(ha...
    ZombieBrandg阅读 682评论 0 1
  • 第1章 鼠标事件 1-1 jQuery鼠标事件之click与dbclick事件 用交互操作中,最简单直接的操作就是...
    mo默22阅读 1,295评论 0 6
  • 事件是什么,可以用来做什么,什么时候用到它? 事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间。JavaScr...
    茂茂爱吃鱼阅读 1,532评论 0 16