我知道已经有关于手机的虚拟键盘隐藏或重叠的输入字段，文本区域等问题的一些StackOverflow的线程。但所有这些线程都没用，我搜索了很多，但很多都是基于Android开发和基于Web开发的一些问题讨论这个问题。虚拟键盘隐藏字段/文本域/ CONTENTEDITABLE（下面隐藏键盘）

我专注于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; 
    } 
}

那么，对于这部分将是我的问题，我也不曾忘记的设备，这也打开了一个虚拟键盘和主要的问题是还有什么，除了我的解决办法？我没有找到明确识别虚拟键盘的东西。

编辑2015年4月24日：

家伙，我只是一个三星Galaxy Note和火狐，Chrome以及歌剧的最新的移动浏览器版本进行了测试。（！更新了所有三个，今天）

好这里是我的结果： enter image description here

你可以看到所有的浏览器，火狐之外，失败，这是我的问题的完美的视觉例子。虚拟键盘与可编辑区域重叠！通常，我比其他任何浏览器都更喜欢Chrome，但对于这种情况，我必须说 - 非常棒的Firefox！

来源

2015-04-23 user3714751

你对所讨论的元素使用'position：fixed'或'position：absolute'吗？ – Siguza

我不明确地改变位置，所以如果我使用引导它是位置：相对。 – user3714751

如果您发现任何解决方案，请让我们知道。 –

...从已经公布的照片看起来，你必须使用一个飞越滚动的元素与height:100%持有的内容。我对吗？

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

编辑：我回答了这个问题，而不先阅读注释，看起来像我已经评论，但看起来像我的意见被忽略 - 我不知道为什么，可能是因为我点上。：/

来源

2017-07-06 01:09:28 scooterlord

虚拟键盘隐藏字段/文本域/ CONTENTEDITABLE（下面隐藏键盘）

编辑2015年4月24日：

回答

相关问题