部分iOS系统中软键盘收起H5页面不回落

最新推荐文章于 2023-08-15 15:18:09 发布

敲键盘的小菜鸡

最新推荐文章于 2023-08-15 15:18:09 发布

阅读量256

点赞数

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/weixin_54193181/article/details/129930772

版权

这段代码检测是否为iOS设备，并在焦点切换时处理键盘弹起和关闭事件。当键盘弹起（focusin）时，标记状态并清除可能存在的定时器；键盘关闭（focusout）时，若标记为打开状态，则滚动页面回到顶部。

摘要由CSDN通过智能技术生成

  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
      })
    }

直接复制粘贴过去就能用！