虚拟键盘隐藏字段/ textareas / contenteditable（隐藏在键盘下方）

Question

我知道已经有一些StackOverflow线程关于手机的虚拟键盘隐藏或重叠输入字段，文本区域等问题。但是所有这些线程都没用，我搜索了很多，但很多人都在谈论基于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！

Answer 1

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

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

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