Question

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

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

我已经看到有关此问题的几篇文章，并且有多种iOS应用开发解决方案，但没有针对Web应用的真正解决方案。

我没有足够的资源来在多个设备上进行测试，并且我没有android设备，所以我不知道是否甚至在这里出现此问题。

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

Answer 1

您可以做的是在任何单击事件中隐藏键盘。因此，弄清楚什么时候不想显示键盘以及什么时候真正想要显示键盘。

因此，一旦找到，您就可以像这样隐藏键盘：

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

Answer 2

这个答案是骇客；但这是我想出的最好的解决方案。

在页面底部添加足够大的键盘填充，以便在键盘可见时可以按需显示内容。

使用一些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 3

这又如何：stackoverflow: Scroll textfield up when keyboard popsup？

即使您不使用jquery，您仍然可以绑定焦点事件并使用window.scrollTo(0, document.body.scrollHeight);函数滚动页面，然后滚动到底部。因为有趣的是，创建了空间，但没有滚动到该空间。

如果想花哨的话，可以检查窗口大小以确定是否要滚动以及滚动多少。

Answer 4

以下答案可能对您有帮助：Scroll textfield up when keyboard popsup

总而言之，您可以使用视觉视口api并相应地更新下一个渲染。

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

4 个答案: