如何防止手机键盘覆盖html输入

Question

我有一个简单的 Web 应用程序，其中有一些文本输入，并且页面底部的输入被 iPhone 键盘覆盖。这是一种糟糕的用户体验，使得用户很难看到他们正在输入的文本以及在输入文本后选择页面上的其他元素。

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

我看过很多关于这个问题的帖子，并且有多种针对 iOS 应用程序开发的解决方案，但没有针对 Web 应用程序的真正解决方案。

我没有资源在多个设备上进行测试，而且我没有 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;
}

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

Answer 2

您可以做的是在任何点击事件上隐藏键盘。因此，弄清楚什么时候你不想显示键盘，什么时候你真的想显示它。

因此，一旦弄清楚，您就可以隐藏键盘，如下所示：

InputMethodManager manager = getSystemService(INPUT_METHOD_SERVICE);
manager.hideSoftInputFromWindow(getCurrentFocus().getWindowToken(),InputMethodManager.HIDE_NOT_ALWAYS);