H5-ios,软键盘收起,页面整体不下滑

最近,被iphone x xs xr 这几款型号手机要折腾残废了,各种bug 往出爆

软键盘关闭,页面不下滑或者不能滑动(iphone 7p没有问题)

解法:

第一种方案:
  const u = navigator.userAgent
  const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
  // 如果是IOS设备
  if (isiOS) {
    let flag = false
    let pageBackNormFunc
    // 聚焦后,键盘弹起
    document.body.addEventListener('focusin', () => {
      flag = true
      pageBackNormFunc && clearTimeout(pageBackNormFunc)
    })
    // 失焦后,键盘关闭
    document.body.addEventListener('focusout', () => {
      if (flag) {
        // 页面滚动回原来的位置
        pageBackNormFunc = setTimeout(() => {
          window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
        }, 200)
      }
      flag = false
    })
  }
第二种方案:
document.addEventListener('blur', function(e) {
    // 这里加了个类型判断,因为a等元素也会触发blur事件
    ['input', 'textarea'].includes(e.target.localName) && document.body.scrollIntoView(false)
}, true)
第三种方案:
let u = navigator.userAgent
let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
if (isiOS) {
  window.scrollTo(0, 0)
}
第四种方案:
let blurTime = null
let scrollTop = window.document.body.scrollTop
const isAndroid = () => {
   let u = window.navigator.userAgent
   let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1
   // let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
   return isAndroid
}
focus 事件:
getFocue () {
  if (this.blurTime) {
     clearTimeout(blurTime, 0)
 }
  if(isAndroid()){
     event.target.scrollIntoView()
  }
}

blur 事件:
getBlur() {
blurTime = setTimeout(function () {
     document.body.scrollTop = scrollTop
     window.scrollTo(0, 0)
 }, 500)
}

亲测了好几种方法,对我页面来说,第一种方法还是可以的,后面几种会出现各种诡异的问题,不过这个因人而异吧~

第一种方法参考链接:
https://blog.csdn.net/hxing1923439601/article/details/103190165?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task

你可能感兴趣的:(H5-ios,软键盘收起,页面整体不下滑)