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

Posted 2023-05-07

【中文标题】如何防止手机键盘覆盖html输入

【英文标题】：How to prevent mobile keyboard from covering html input

【发布时间】：2019-07-01 16:28:04

【问题描述】：

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

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

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

我没有在多台设备上测试的资源，也没有安卓设备，所以我不知道这个问题是否在那里发生。

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

【问题讨论】：

有趣的是，这只发生在 iOS 中，android 运行良好。但是在我的应用程序中滚动焦点事件（如我的答案中所写）。

【参考方案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); 

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

input 
    font-size: 16px !important;

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

【参考方案2】：

这个呢：***: Scroll textfield up when keyboard popsup？

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

如果您想看点什么，您可以检查窗口大小以确定是否要滚动以及要滚动多少。

【讨论】：

谢谢杰里米。至少对于 iOS，它会自动滚动到输入；但是，只有当有足够的空间滚动到它时。那么问题来了，如果一个输入在页面底部附近没有足够的空间向上滚动，它就会被键盘覆盖。

【参考方案3】：

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

所以一旦想通了，你可以像这样隐藏键盘：

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

【讨论】：

谢谢萨加尔；但是，我觉得这不能解决我的问题。我希望在用户使用键盘时输入可见，以便他们可以看到正在输入的文本。

【参考方案4】：

这里有一个可能对你有帮助的答案：Scroll textfield up when keyboard popsup

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

【参考方案5】：

我所做的是在聚焦时将元素滚动到视图中通过触摸。

没有确切的 api 或任何东西可以知道键盘是否完全打开，或者键盘覆盖了多少（在 chrome 中实际上键盘减少了视口，而不是覆盖在顶部），但是查看 average 手机，它覆盖了大约一半。

至于实现，我使用一种简单的启发式。如果设备是触摸设备see mobile device detection section here，您可以全押，但这并不一定涵盖带有触摸屏的笔记本电脑。 （根据分辨率来做也是个坏主意）

我将这种“触摸设备”方法向前迈进了一步，并在表单元素上监听 touchstart 事件并设置一个类似hasTouchKeyboard 的变量，然后将元素滚动到页面顶部（或至少前半部分是可能未涵盖）如果此变量为 true，则在聚焦时。

其背后的想法是 touchstart usually 在焦点事件之前触发，加上真正的区别在于，如果用户触摸输入字段，那么它是 100% 正在使用触摸设备并实际使用了触摸（这将可能触发键盘），而不仅仅是用鼠标将其聚焦在混合设备上。

这绝对不是万无一失的，但相当简单，并且在没有任何用户代理魔法或其他疯狂东西的情况下运行良好。