H5页面 ios 键盘收起后弹出层焦点错位

最新推荐文章于 2025-07-13 12:43:52 发布

原创最新推荐文章于 2025-07-13 12:43:52 发布 · 8.4k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#H5 #js #vue #ios键盘 #挤压页面

Vue 专栏收录该内容

3 篇文章

订阅专栏

本文解决H5应用在iOS设备上遇到的键盘收起后弹出层焦点错位问题，通过监听键盘弹出与收起事件，强制页面归位，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

请注明出处：https://blog.youkuaiyun.com/qq_23179075/article/details/86497498

解决H5页面 ios键盘收起后弹出层焦点错位问题

用 H5 写app页面的时候 IOS 上出现如下问题：（Android 中不存在）
在这里插入图片描述
布局如上图：背后是可滚动的列表，前面是弹出框。当打开键盘后，弹出框跟后面的列表都会被顶上去一段距离，如下图：

当再关闭键盘就可能出现：前面的弹出框回到了原来的位置，而后面的列表依然是顶上去的位置。这时后再去点击弹出框的输入框或者按钮的时候发现焦点依然停留在键盘弹出后顶上去的位置，造成了弹出层焦点错位。只有手动滑动后面的列表到原来位置后，弹出层的焦点才会恢复，影响体验。

解决方法

  import $d from 'devices.js'
  let isReset = true;//是否归为
  if ($d.device() === 'ios') {
    document.body.addEventListener('focusin', () => {
      //软键盘弹出的事件处理
      isReset = false;
    });
    document.body.addEventListener('focusout', () => {
      //软键盘收起的事件处理
      isReset = true;
      setTimeout(() => {
      	//当焦点在弹出层的输入框之间切换时先不归位
        if (isReset) {
          window.scroll(0, 0);//失焦后强制让页面归位
        }
      }, 300);
    });
  } else if ($d.device() === '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);
      }
    }
  }

贴上devices.js的代码

export default {
  device() {
    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';
  }
};