解决IOS中input失焦后,页面上移,点击不了问题

Posted wr20190131

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了解决IOS中input失焦后,页面上移,点击不了问题相关的知识,希望对你有一定的参考价值。

ios在Input失焦后,发现body的页面会停止不下来,并且页面上的输入框,按钮点击事件,全部都移位了,需要滑动一下才可以正常。

技术图片

技术图片

下面是解决方法,可全局引用:

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

        }, 200);
      } else {
        return
      }
    })
  } else {
    return
  }

引自:https://www.javascriptcn.com/read-52084.html

以上是关于解决IOS中input失焦后,页面上移,点击不了问题的主要内容,如果未能解决你的问题,请参考以下文章

NO---22 H5在ios端微信浏览器中,input事件触发后页面不复位的问题

EditText 无法失焦与失焦后键盘不收缩解决方案

解决安卓收起键盘无法触发失焦事件的问题

[Cordova/Phonegap] Cordova iOS 应用在第三方输入法的键盘弹出(点击输入框)时,页面不上移,导致输入框被键盘遮挡 的解决办法

ios软键盘弹出再收起,页面布局错乱问题解决

document.activeElement 过滤选择文件弹窗导致的页面失焦