探讨 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 分钟前
【Web应用服务器_Tomcat】三、Tomcat 性能优化与监控诊断
前端·中间件·性能优化·tomcat·web应用服务器
brzhang6 分钟前
告别 CURD,走向架构:一份帮你打通任督二脉的知识地图
前端·后端·架构
Moment13 分钟前
在 React 里面实现国际化实现是太简单了 🙂‍↔️🙂‍↔️🙂‍↔️
前端·javascript·react.js
兜小糖的小秃毛14 分钟前
el-Input输入数字自动转千分位进行展示
前端·javascript·vue.js
兜小糖的小秃毛14 分钟前
文号验证-同时对两个输入框验证
开发语言·前端·javascript
brzhang15 分钟前
代码越写越乱?掌握这 5 种架构模式,小白也能搭出清晰系统!
前端·后端·架构
J总裁的小芒果22 分钟前
el-table 自定义列、自定义数据
前端·javascript·vue.js
晚风予星23 分钟前
简记|React+Antd中实现 tooltip、ellipsis、copyable功能组件
前端·react.js
brzhang30 分钟前
告别『上线裸奔』!一文带你配齐生产级 Web 应用的 10 大核心组件
前端·后端·架构
程序员Bears31 分钟前
深入理解CSS3:Flex/Grid布局、动画与媒体查询实战指南
前端·css3·媒体·visual studio code