开篇
在一个 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);
})
你有没有独到见解呢?
探讨
此时屏幕前的读者,若是有更为合适的解决方案,欢迎在评论区发表您宝贵的见解,给予需要帮助的人。