我知道已经有关于手机的虚拟键盘隐藏或重叠的输入字段,文本区域等问题的一些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以及歌剧的最新的移动浏览器版本进行了测试。 (!更新了所有三个,今天)
好这里是我的结果:
你可以看到所有的浏览器,火狐之外,失败,这是我的问题的完美的视觉例子。虚拟键盘与可编辑区域重叠! 通常,我比其他任何浏览器都更喜欢Chrome,但对于这种情况,我必须说 - 非常棒的Firefox!
你对所讨论的元素使用'position:fixed'或'position:absolute'吗? – Siguza
我不明确地改变位置,所以如果我使用引导它是位置:相对。 – user3714751
如果您发现任何解决方案,请让我们知道。 –