js实现监听键盘的收起和弹出

最新推荐文章于 2024-12-01 20:46:56 发布

原创最新推荐文章于 2024-12-01 20:46:56 发布 · 5.2k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#js实现键盘监听 #ios键盘问题 #唤起键盘导致input失焦

技术同时被 3 个专栏收录

21 篇文章

订阅专栏

前端技术

10 篇文章

订阅专栏

javascript

4 篇文章

订阅专栏

在Vue项目的弹出层popup中，当ios手机键盘弹出和收起时，输入框input可能因键盘遮挡导致失焦。分析原因是键盘收起时弹层位置未及时恢复。通过监听键盘状态并调整弹层位置，可以解决这个问题。具体实现包括getDevice方法的代码实现，有效解决了键盘收起和唤起事件的监听。

之前遇到一个bug，前提因素：

1. vue项目

2. 弹出层popup

3. ios手机

4. 弹出层中的input获取焦点后点击键盘上的“完成”按钮收起键盘，再次触发input获取焦点发现没有反应。

分析原因后，发现实则是弹出层随着键盘的收起和展开进行了下移和上移，而元素的点击位置没有实时变化，如下：

正常的时候：

唤起键盘：

收起键盘后：实则弹层位置还没归位

所以，需要实现收起后弹层归位，代码如下：

/**
* 收起键盘导致弹层位置错乱，需要强制滚动页面，让它归位
*/
let isReset = true; //是否归位
      if (cm.getDevice() === 'ios') {
        document.body.addEventListener('focusin', () => {
          // 软键盘弹出的事件处理
          isReset = false;
        });
        document.body.addEventListener('focusout', () => {
          // 软键盘收起的事件处理
          isReset = true;
          setTimeout(() => {
            // 当焦点在弹出层的输入框之间切换时先不归位
            if (isReset) {
              window.scroll(0, 0); // 失焦后强制让页面归位
            }
          }, 300);
        });
      } else if (cm.getDevice() === 'android') {
        window.onresize = function () {
          // 键盘弹起与隐藏都会引起窗口的高度发生变化
          let resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
          if (resizeHeight < h) {
            // 当软键盘弹起，在此处操作
            isReset = false;
          } else {
            // 当软键盘收起，在此处操作
            isReset = true;
            setTimeout(() => {
              if (isReset) {
                window.scroll(0, 0); // 失焦后强制让页面归位
              }
            }, 300);
          }
        }
      }

getDevice方法代码：

getDevice() {
  const u = navigator.userAgent;
  const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
  const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
  if (isAndroid)
    return 'android';
  if (isiOS)
    return 'ios';
}

这样就可以解决了，顺便解决了js监听键盘收起和唤起事件～