虚拟键盘隐藏字段/文本区域/内容可编辑（隐藏在键盘下方）

Posted 2023-03-06

【中文标题】虚拟键盘隐藏字段/文本区域/内容可编辑（隐藏在键盘下方）

【英文标题】：Virtual Keyboard hides fields/textareas/contenteditable (hidden below keyboard)

【发布时间】：2015-07-01 13:28:57

【问题描述】：

我知道已经有一些***线程关于手机虚拟键盘隐藏或重叠输入字段、文本区域等问题。但是所有这些帖子都没用，我搜索了很多，但是很多人都在谈论这个问题是基于android开发的，也有一些基于Web开发的。

我专注于网络开发。问题是，没有解决问题或给出/发布任何真正有用的答案的线程。

所以我开始了这个，希望它现在能得到解决。那么现在直接是什么问题呢？

如果您在移动设备上单击可以输入内容的区域，您通常会期望网站向上滚动并且在可编辑区域之后打开虚拟键盘，但实际情况并非如此。虚拟键盘以叠加的形式打开 - 它开始与可编辑区域重叠。

在我的例子中，我打开了一个 jQuery UI 对话框，我的字段位于其中，但我认为这无关紧要。

所以我让我的想法交叉并提出解决方案以增加一些额外的空间。像这样的东西：JSFiddle。

所以我可以向下滚动。但这很烦人，因为对于不使用打开虚拟键盘的设备的人来说，它是无用的，或者说是不需要的。于是我想到了这样一个函数：

function isMobileDevice() 
    var isiPhone = navigator.userAgent.toLowerCase().indexOf("iphone");
    var isiPad = navigator.userAgent.toLowerCase().indexOf("ipad");
    var isiPod = navigator.userAgent.toLowerCase().indexOf("ipod");
    var isAndroid = navigator.userAgent.toLowerCase().indexOf("android");
    if (isiPhone > -1 || isiPad > -1 || isiPod > -1 || isAndroid > -1) 
        return true
     else 
        return false;
    

好吧，这部分是我的问题，我是否忘记了一个设备，它也会打开一个虚拟键盘，主要的问题是除了我的解决方法之外还有什么其他的吗？我没有找到可以明确识别虚拟键盘的东西。

编辑 24.04.2015：

伙计们，我刚刚使用三星 Galaxy Note 和最新的移动浏览器版本的 Firefox、Chrome 和 Opera 对其进行了测试。 （今天更新了所有三个！）

好的，这是我的结果：

您可以看到除 Firefox 之外的所有浏览器都失败了，这是我的问题的完美视觉示例。虚拟键盘与可编辑区域重叠！ 通常，我更喜欢 Chrome 而不是任何其他浏览器，但对于这种情况，我不得不说 - Firefox 干得好！

【问题讨论】：

您是否在有问题的元素上使用position: fixed 或position: absolute？

我没有明确改变位置，所以如果我使用引导程序，它是位置：相对。

如果您找到任何解决方案，请告诉我们。

我遇到过类似的问题，但我很清楚为什么这个问题也会在 jsfiddle 中被复制，如果没有你的实际代码很难说。如果您在体内使用溢出的内容，您可能会得到这个结果。通常当虚拟键盘打开时，BODY会滚动到输入位置，但是溢出的内容不会滚动。

【参考方案1】：

...从已发布的照片​​的外观来看，您必须使用带有height:100% 的溢出可滚动元素来保存内容。我说的对吗？

如果是这样，这就是虚拟键盘与您的内容重叠的原因：虚拟键盘倾向于推送正文内容，以便专注于输入而不是不溢出的元素。在这种情况下，正文内容不会移动，因此虚拟键盘只会与您的内容重叠。我不知道 Mozilla 的开发人员是否在这个特定问题上花费了更多时间，但看起来他们确实这样做了。

编辑：我在没有先阅读 cmets 的情况下回答了这个问题，看起来我已经发表了评论，但看起来我的评论被忽略了 - 我想知道为什么，因为我可能是正确的。 ：/