文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

我们一起聊聊如何巧妙应对iOS键盘难题?

2024-11-29 23:20

关注

webview的差异

在移动端上,我们的H5页面一般是运行在宿主APP提供的webview中,简单点理解,你其实可以把它当作浏览器,就是用来展现页面内容的。目前移动端主流系统分为Android与iOS,然而两者提供的webview容器也存在着诸多差异,今天我们就只探讨两者软键盘带来的影响。

首先,我们先来写个简单的页面布局:头部fixed+中间自适应+底部fixed

图片

Android

事实上Android的表现并不会有太大问题,它只不过是在键盘弹起来之后把webview的高度减小了,变成了:原来的webview高度减去键盘的高度

图片

这样的表现正是我们期待的,完全没有影响整个页面的布局

iOS

软键盘

在iOS 8.2 之后,iOS 唯一指定浏览器内核、Webkit 鼻祖 Safari 将 fixed 元素的布局基准区域从键盘上方的可见区域改成了键盘背后的整个视窗,也就是说此时的webview高度并不会发生变化,键盘是直接盖在webview上方的。

这样是为了在键盘弹起来之后,不用重新渲染页面,他们是方便了,但遭殃的是我们前端开发人员...

比如上面这个页面,我们看看iOS的表现是怎样的:

图片

可以看到,iOS为了不让webview压缩,并且为了不让软键盘遮挡输入框,他们自作聪明地把webview整体往上移动,最大移动距离为软键盘的高度。

这样就导致我们的头部以及页面上半部分内容移动到了可视区之外,这个表现是难以接受的,至少头部应该还要在可视区。(这就会让我们误以为fixed失效,实际上它相对于webview的位置并没有变,只不过是webview发生了移动)

这个移动似乎没有逻辑,不信大家可以试试把输入框放到页面的各个位置,我发现只有输入框在最顶部,webview才不会发生上移,其它位置都或多或少的会产生移动。

还有一个问题就是,此时的webview是可以滑动的,那么就会出现有用户会将输入框滑动到键盘下方,想想这个体验也是难以接受的...

图片

并且你会发现,在页面的上方与下方都多出了一个不论是 Viewport 还是 VisualViewport 都无法到达的白色衬底区域,我们可以尝试把页面所有元素背景都改成黑色再来看,会更加明显

图片

看到这些奇奇怪怪的问题你心里作何感想??

所有问题产生的根本原因是:iOS为了不用在键盘弹起之后重新渲染页面,他们并没有去压缩webview容器的高度,而是对webview整体进行平移处理

软键盘监听

对于Android,我们通常可以通过监听resize事件来实现,但对于iOS,我们从上面了解到键盘弹起,iOS的webview高度并不会发生变化,所以也就触发不了resize事件。

在iOS中,可以通过focusin & focusout事件来进行监听

export const watchKeyBoard = (callback: (isShow: boolean) => void) => {
  //  IOS
  if (isIOSByUA()) {
    document.body.addEventListener('focusin', () => {
      //软键盘弹出的事件处理
      callback(true)
    })
    document.body.addEventListener('focusout', () => {
      //软键盘收起的事件处理
      callback(false)
    })
  } else {
    //  Android
    const originalHeight =
      document.documentElement.clientHeight || document.body.clientHeight
    window.addEventListener('resize', () => {
      const resizeHeight =
        document.documentElement.clientHeight || document.body.clientHeight
      if (resizeHeight - 0 < originalHeight - 0) {
        // 键盘弹起事件
        callback(true)
      } else {
        // 键盘收起事件
        callback(false)
      }
    })
  }
}

解决方案

了解完产生问题的原因,我们就可以来尝试着解决问题,但想要纯前端去解决这个问题,或多或少都会存在一些体验问题,也许你可以去推动你们的客户端同学来协助处理这个问题,只要让iOS的webview在键盘弹起时的表现与Android一致,就不会存在这些奇怪的问题了,但似乎他们处理起来也非常棘手...

模仿Android的处理

虽然我们改不了webview的高度,但我们可以改我们布局的高度,我们只需要将页面高度改为页面可视区的高度即可,如果页面内容有滚动交互的话,需要额外处理,要与webview的滚动隔离开。

VisualViewport

先来了解下这个API,它可以用来获取对应 window 的视觉视口

这里我们需要的就是这个VisualViewport.height,用来获取可视区的高度。

但需要注意的是,这个API最低只支持iOS13,ios13以下的使用window.innerHeight兜底

页面布局

整体布局采用flex布局,头部和底部也就不需要fixed来定位了,中间自适应撑满剩余高度,超长滚动

图片

键盘打开计算高度重新布局

我们需要在键盘弹起后,计算可视区的高度,并将最外层容器高度赋值为可视区高度

watchKeyBoard((status) => {
  setTimeout(() => {
    console.log(
      'status',
      status ? '键盘打开' : '键盘关闭',
    )
    const container = document.getElementById('container')
    if (status) {
      container.style.height = `${
      window.visualViewport.height || window.innerHeight
    }px`
      window.scrollTo(0, 0)
    } else {
      container.style.height = `100vh`
      document.removeEventListener('touchmove', this.stopMove)
    }
  }, 100)
})

这样页面展示算是正常了

但是随之而来的是滚动问题😓

图片

处理滚动

我们需要禁用全局的滚动,但对一些需要滚动的区域需要放开,比如中间的列表部分

if (utils.isIOSByUA()) {
  watchKeyBoard((status) => {
    setTimeout(() => {
      console.log(
        'status',
        status ? '键盘打开' : '键盘关闭',
        window.innerHeight,
      )
      const container = document.getElementById('container')
      if (status) {
        container.style.height = `${
        window.visualViewport.height || window.innerHeight
      }px`
        window.scrollTo(0, 0)
        document.addEventListener('touchmove', this.stopMove, {
          passive: false,
        })
        document.addEventListener('touchend', this.scroll)
      } else {
        container.style.height = `100vh`
        document.removeEventListener('touchmove', this.stopMove)
        document.removeEventListener('touchend', this.scroll)
      }
    }, 100)
  })
}
stopMove(e) {
 // 排除可以滚动的区域
  if (['content', 'keyboard_center'].includes(e.target?.className)) return
  e.preventDefault()
}
scroll() {
  window.scrollTo(0, 0)
}

完整体验如下

图片

比起它原本带来的遮挡、滚动、fixed失效等体验,现在的体验算是可以接受的(这里所有的操作我们只需要在iOS上执行即可)

来源:前端南玖内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯