Cordova/Phonegap 3.4.0 iOS 7.1 - 键盘/Web 视图问题答案

【问题标题】：Cordova/Phonegap 3.4.0 iOS 7.1 - Keyboard / Web View issueCordova/Phonegap 3.4.0 iOS 7.1 - 键盘/Web 视图问题
【发布时间】：2014-05-11 12:12:04
【问题描述】：

我已经为这个问题苦苦挣扎了一个多星期，如果我能得到任何帮助，我将不胜感激。我会按我的理解解释这个问题，但如果我说的不正确，请更正。

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

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

但是，在 7.1 中，键盘占据的区域会出现在 Web 视图之上。这有一个痛苦的副作用。假设您想在正文前加上一个 <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;
}

每当您聚焦或输入文本区域时，Web 视图都会原生地重新居中输入字段。由于 web 视图仍然会考虑整个屏幕的高度，因此 div 不会固定在底部，从而破坏了布局。

我尝试了以下方法：

使用 CSS 处理 body 和固定 div。位置固定/绝对似乎没有什么不同。为 body 设置一个明确的高度没有任何作用。
元视口选项的所有可能组合。这是我目前正在使用的：

<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

还有其他人遇到过这个问题吗？有什么解决方案或想法吗？

【问题讨论】：

您如何找到解决此问题的方法？

标签： javascript html ios css cordova

【解决方案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); 

});

希望有帮助！

【讨论】：

【解决方案2】：

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

更多信息在这里.. http://ionicframework.com/blog/ionic-keyboard/

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

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

【讨论】：

【解决方案3】：

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

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

iOS 7.0 以原生方式解决了这个问题，令人惊喜。我注释掉了我的修复（幸运的是，没有删除）并且标题栏保持固定在顶部，没有任何额外的努力。

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

【讨论】：

您是否有幸找到了解决方案？
没有，目前没有找到任何固溶体。

【解决方案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" />

【讨论】：