vue项目苹果ios12系统手机，输入框键盘回弹留下了空白遮罩的处理方式

Z时代
2024-01-10
分类：综合

vue

1、问题表现：H5开发，下单页面，下图所示，在ios 12系统的苹果手机端，在输入电话号，之类信息，经常点击去支付没有任何反应，页面上下滑动，再点击，就可以支付

2、原因分析：结合页面表现，查了网上资料，ios12系统键盘回收后会留下一个透明的遮罩层，在点击页面底部，点击事件没法穿透遮罩层，相当于事件被拦截了。

3、处理方式，项目用的vue开发的，处理思路：在input失去焦点后，页面上下滚动1px，去除遮罩层；该方法作用所有input需要在input用@blur=iosBlur引入

 iosBlur() {
      let ua = window.navigator.userAgent;
      //$alert('浏览器版本: ' + app + '\n' + '用户代理: ' + ua);
      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);
      }
    }