探讨 iOS H5 软键盘遮挡页面底部 input 解决方案

开篇

在一个 H5 页面底部放置 input 发送内容输入框是一个较常见的需求,比如:发表评论、ChatGPT 消息聊天等。

但在 ios 下绕不开一个头疼的话题:input 输入框聚焦唤起软键盘,软键盘遮挡住了底部 input,影响用户使用体验。

下面,作者将自己对这一问题的理解和分析,以文字形式记录在下文。

分析

我们在 ios(v16.1.1) Safari 浏览器下,软键盘将页面底部内容遮挡并不是一个必现问题,只在某些场景下会出现,比如先点击了页面其他区域元素,再点击输入框唤起软键盘时出现遮挡。

经过分析和验证发现:

  1. 不遮挡情况(正常的交互),软键盘会将 H5 页面 「推上去」 ,并且这时候在 h5 页面拿到的视窗高度 window.innerHeight 也会随之变小,如由原来的 664 变为了 370。

这是因为软键盘的出现,占据了一部分空间,致使页面的可视高度缩小。(这有点儿像 Flex 布局的意思,未脱离文档流)

(可以粗估 软键盘 高度为 664 - 370)

js 复制代码
const normalVH = window.innerHeight; // 输入框聚焦前的可视高度 664

input.addEventListener("focus", () => {
  setTimeout(() => {
    const focusVH = window.innerHeight; // 输入框聚焦后的可视高度 370
  }, 300);
})
  1. 遮挡情况,软键盘 「覆盖」 在了 H5 页面之上,这时候 window.innerHeight 其实不会发生变化。(这有点儿像 position absolute 布局的意思,脱离了文档流)

在网上查询资料,针对遮挡的处理方案,会选择 JS 进行页面滚动到页面底部让 input 输入框显示,如下示例:

js 复制代码
const normalVH = window.innerHeight; // 输入框聚焦前的可视高度 664

input.addEventListener("focus", () => {
  setTimeout(() => {
    const focusVH = window.innerHeight; // 输入框聚焦后的可视高度并未发生变化,依旧是 664
    // 期望,让滚动位置,刚巧滚动到底部输入框的可视区域
    document.documentElement.scrollTop = document.documentElement.scrollHeight - focusVH;
  }, 300);
})

但这种方式带来的效果是:输入框并不是合理展示在软键盘之上,而在输入框底部还出现一部分空白区域(ios Safari 浏览器的滑动缓冲空间)

也就是说滚动距离太多了。本质是因为 focusVH 视窗并没有因为弹出了软键盘而缩小。

不过这种滚动方式在第一种情况下来说是有效的,但没有意义(第一种是正常的,不需要做滚动处理)。

所以我想到的方式是:既然我们现在能够判断出是否出现了遮挡(normalVH === focusVH),在页面顶部给出轻提示,指引用户滑动到底部查看输入框内容。

js 复制代码
input.addEventListener("focus", () => {
  setTimeout(() => {
    const focusVH = window.innerHeight; // 输入框聚焦后的可视高度 370
    if (normalVH === focusVH) {
      // message.info(...)
    } else {
      // 正常的不遮挡情况,不需要额外处理
    }
  }, 300);
})

你有没有独到见解呢?

探讨

此时屏幕前的读者,若是有更为合适的解决方案,欢迎在评论区发表您宝贵的见解,给予需要帮助的人。

相关推荐
我要洋人死1 小时前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人1 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人1 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香1 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼3 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風7 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#