IOS中input失焦后,页面上移点击不生效问题

2,111 阅读1分钟

场景:表单填写页面

多个input、确认保存按钮(固定定位在页面底部)、操作页面input出现溢出一屏的现象(不出现溢屏想象不出现此问题)

问题描述

IOS手机在Input获取焦点、失去焦点之后页面会整体上移,保存按钮绑定的点击事件失效,需要滑动一下页面点击事件才生效,或者点击按钮的上面部分(如下图)这个体验...

解决代码:

  var u = navigator.userAgent;
  var flag;
  var goBack;
  var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
  if (isIOS) {
    document.body.addEventListener('focusin', () => {
      //软键盘弹起事件
      flag = true;
      clearTimeout(goBack);
    })
    document.body.addEventListener('focusout', () => {
      //软键盘关闭事件
      flag = false;
      if (!flag) {
        goBack = setTimeout(function () {
          window.scrollTo({ top: 0, left: 0, behavior: "smooth" })
          //当键盘收起的时候让页面回到原始位置
          //(这里的top可以根据你们个人的需求改变,并不一定要回到页面顶部)
        }, 200);
      } else {
        return false;
      }
    })
  } 

参考链接: segmentfault.com/a/119000001…