虚拟键盘隐藏字段/ textareas/contenteditable(隐藏在键盘下方)

Question

我知道已经有一些StackOverflow线程关于手机的虚拟键盘隐藏或重叠输入字段,文本区域等问题.但所有这些线程都没用,我搜索了很多,但很多人都在谈论基于Android开发的这个问题,还有一些基于Web开发.

我专注于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 的开发人员是否在这个特定问题上花费了更多时间，但看起来他们确实这么做了。

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