Question

我已经在这个问题上苦苦挣扎了一个多星期了，非常感谢我能得到的任何帮助。我会按照我的理解解释这个问题，但如果我说错了，请纠正。

在iOS 7.0.x中，当键盘显示时，Web视图已调整大小，因此键盘所占用的区域不被视为视口窗口大小的一部分。直到7.0，Cordova Keyboard插件处理此Web视图大小调整。由于7.0本地处理键盘以所需方式显示，shrinkView文件的Keyboard config.xml选项在此提交时变为“No-op”：

https://github.com/apache/cordova-plugins/commit/20215013bf91b659b73d5f428ae91dd58be1273a

但是，在7.1中，键盘占用的区域出现在Web视图上。这有一个痛苦的副作用。假设你想在一个textarea区域（例如留下评论或聊天回复）前面加<div>，即;

<body>
  <div id="app">...</div>
  <div id="reply">
    <textarea></textarea>
  </div>
</body>

示例CSS：

body {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  overflow: hidden;
}
#reply {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

每当您将焦点或输入到textarea时，Web视图将原生地重新定位输入字段。由于Web视图仍然考虑到屏幕的整个高度，因此div不会保持固定在底部，从而打破了布局。

我尝试过以下事项：

与身体和固定div的CSS一起使用。固定/绝对位置似乎没有什么区别。为身体设置明确的高度不会做任何事情。
元视口选项的所有可能组合。这就是我目前使用的：

<meta name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1, width=device-width, height=device-height, minimal-ui" />

取消注释cordova键盘插件中的“No-op”。这仍然像在iOS 7.0.x中那样打破了布局。
在input和focus事件上使用JS事件侦听器来继续计算底部偏移量以使div保持在底部。这非常激动，因为它与输入字段居中的本地Web视图行为作斗争。
在显示/隐藏键盘后更改元标记以设置显式高度。

我正在使用Cordova 3.4.0-0.1.3

还有其他人遇到过此问题吗？任何解决方案或想法？

Answer 1

对我来说，一个快速解决方法是在输入失去焦点时强制窗口滚动回到位置：

$("input").on('blur',function(){

 //set brief timeout to let window catch up
 setTimout(function(){

   //reposition at top left corner of screen
   window.scrollTo(0,0);

 },20); 

});

希望有所帮助！

Answer 2

看起来Ionic有这个问题的多部分解决方案，包括根据设备动态更新元视口标签，还可以通过挂钩键盘隐藏/显示事件，然后使用滚动框架将输入滚动到视图中。

此处有更多信息.. http://ionicframework.com/blog/ionic-keyboard/

这需要你使用他们的框架，所以我正在将它移植到JQuery和IScroll上，我会及时通知你我的进展。

我还在phonegap论坛上发布了我使用phonegap键盘的经历，但还没有得到太多回复。 https://groups.google.com/forum/#!topic/phonegap/LE9-lIsNT2c

Answer 3

我遇到了类似的问题。我有一个与Sencha Touch结合使用的cordova 3.3.0应用程序。

我在iOS 7.0之前遇到的问题是当键盘出现时标题栏超出了屏幕顶部。键盘只是用来推动整个视口。经过大量的搜索和努力，我能够通过实现计数器动画来部分解决问题，在键盘上升时使用文本字段的焦点和模糊事件向下移动标题栏。

iOS 7.0令人高兴，因为它本身修复了这个问题。我评论了我的修复（幸运的是，没有删除），标题栏仍然固定在顶部，没有任何额外的努力。

似乎iOS 7.1已经恢复了该修复（想知道为什么??）。当我更新到iOS 7.1时，标题栏问题又回来了，我现在别无选择，只能取消注释笨拙的修复。任何人都可以提供一些更好或永久的解决方案来解决这个问题吗？

Answer 4

这会解决您的问题吗？

检查你的html元标记，如下所示：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">

替换为：

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />

Cordova / Phonegap 3.4.0 iOS 7.1 - 键盘/ Web查看问题

4 个答案: