javascript - 如何防止移动键盘覆盖html输入

Question

我有一个简单的网络应用程序，其中包含一些文本输入，并且页面底部的输入被 iPhone 键盘遮盖了。这是一种糟糕的用户体验，用户很难看到他们输入的文本，也很难在输入完文本后选择页面上的其他元素。

Apple 在此处记录了该行为:https://developer.apple.com/library/archive/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/KeyboardManagement/KeyboardManagement.html

我看过几篇关于这个问题的帖子，iOS 应用程序开发有多种解决方案，但网络应用程序没有真正的解决方案。

我没有资源在多个设备上进行测试，而且我没有 Android 设备，所以我不知道这个问题是否会在那里发生。

是否有跨平台解决方案来检测键盘何时覆盖 UI、覆盖了多少 UI 以及确保输入可见的方法？

Answer 1

这个答案是 hack；但这是我想出的最佳解决方案。

在页面底部添加一个足以容纳键盘的内边距，以便在键盘可见时根据需要显示内容。

使用一些 javascript 监听器和 CSS 类，可以仅在显示键盘时添加此填充。

body.keyboard {
    height: calc(100% + 500px); /* add padding for keyboard */
}

以下 javascript 将在输入具有焦点时添加和删除 CSS 类，这是我最接近于确定何时显示键盘。

// focus events don't bubble, must use capture phase
document.body.addEventListener("focus", event => {
    const target = event.target;
    switch (target.tagName) {
        case "INPUT":
        case "TEXTAREA":
        case "SELECT":
            document.body.classList.add("keyboard");
    }
}, true); 
document.body.addEventListener("blur", () => {
    document.body.classList.remove("keyboard");
}, true); 

还值得注意的是，如果输入字体大小小于 16px，iOS 会执行烦人的缩放，因此这也很重要。

input {
    font-size: 16px !important;
}

如果您有更好的解决方案，请告诉我。