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

开篇

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

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

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

分析

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

经过分析和验证发现：

不遮挡情况（正常的交互），软键盘会将 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);
})

遮挡情况，软键盘 「覆盖」 在了 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);
})

你有没有独到见解呢？

探讨

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