ios12以上微信内置浏览器键盘回收后空白问题处理

最新推荐文章于 2024-08-01 09:17:58 发布

陈小成

最新推荐文章于 2024-08-01 09:17:58 发布

阅读量1.4k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端 ios12 键盘空白文章标签： ios12 键盘空白微信内置浏览器

本文链接：https://blog.youkuaiyun.com/weixin_44330517/article/details/87974706

前端同时被 3 个专栏收录

12 篇文章

订阅专栏

ios12

2 篇文章

订阅专栏

键盘

2 篇文章

订阅专栏

本文探讨了在iOS12以上微信内置浏览器中，表单提交按钮被透明遮罩遮挡的问题。通过分析，发现此现象仅在特定条件下出现。解决方案为在input失去焦点时，对页面进行轻微滚动，以移除遮罩。

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

问题：公司项目，表单提交页面，如下图所示，在输入框输入内容后，点击底部提交按钮，事件没有触发
在这里插入图片描述
问题本质：ios12以上（目前），微信内置的浏览器在键盘回收后会留下一个透明的遮罩（个人猜想，没法验证），遮挡了页面底部，没法点击到提交按钮。在每次拖拽页面滚动后，页面又是可以点击提交的，所以这个bug可以通过滚动页面是兼容这个bug。
处理方式：既然已经明确了问题的原因，处理方式其实就是滚动下页面就能处理。
处理思路：监听input失去焦点事件，然后判断系统，如果是ios系统则页面向上滚动1px然后再向下滚动1px，移除键盘回收后留下的bug

//失去焦点事件后触发
  let ua = window.navigator.userAgent;
    //判断系统
      if (!!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        //ios系统
        let currentPosition, timer;
        let speed = 1;
        timer = setInterval(function () {
          currentPosition =
            document.documentElement.scrollTop || document.body.scrollTop;
          currentPosition -= speed;
          window.scrollTo(0, currentPosition); //页面向上滚动
          currentPosition += speed;
          window.scrollTo(0, currentPosition); //页面向下滚动
          clearInterval(timer);
          // alert("失去焦点")
          console.log("失去焦点")
        }, 100);
      }

问题总结：该问题比较难定位，测试的时候安卓手机，ios的safri浏览器都是可以的，低版本的ios系统也是没有问题的，并且ios微信内置浏览器也是偶尔出现，只要ios12以上的微信内置浏览器才会出现，都不是很明确问题原因，这个过程最麻烦。项目开发中，兼容的问题是一大问题。遇到类似的问题，要多尝试，多测试，多上网查相关的资料。
资料：https://www.jianshu.com/p/a57946771c4d