iphone - 键盘使用 iFrame/对象和 JQTouch 在 PhoneGap Build 3.1 中隐藏 iOS 输入字段

Question

我正在开发一个应用程序，它将表单从另一个网站加载到 iFrame 中。 iFrame 在显示时设置为 100% 宽度和高度。该网站有 JQTouch。

当我在 iPhone 上触摸 iOS 7 中的输入字段时，键盘会弹出并覆盖输入字段。它不能滚动、调整大小，甚至不能让我向下滚动查看输入字段。如果我输入然后关闭键盘，则不会发生任何事情。

我已经尝试了我遇到的一切。在元视口(viewport)标记中添加/删除 height=device-height 没有执行任何操作。最接近解决方案的是在 config.xml 中添加首选项“KeyboardShrinksView = true”。这使其滚动(但还不够)，并将网站永久推高约 20 像素左右。

过去几天我一直在研究这个问题，但目前还没有找到解决方案。这是一个错误吗？这是 JQTouch 与 PhoneGap Build 交互的方式吗？

更新:仍然没有修复，但为了测试，我将表单的页面从 iframe 中取出并使用 window.location.href="www.mywebsite.com"; 设置它。他们的键盘在这种情况下可以工作。这对我来说还不是一个有效的解决方案，但可能会提供有关它不起作用的原因的信息。

更新 2:我正在重组应用程序以使用 window.location.href，而不是 iframe 或 html 对象。这会产生一些小问题，但这些比键盘无法工作要好。如果有人有答案，我仍然想看看。

Answer 1

主要编辑:我刚刚意识到 InAppBrowser 插件并不能单独修复键盘错误。我做了更多研究，并且 this topic helped 。我必须将“height=device-height”添加到每个元视口(viewport)标签中。 “width=device-width”应该可以解决在移动 Safari 中查看网站的任何问题。最终结果是这样的:

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

其中一个还包含一个分号，因此请务必检查并仔细检查语法错误，因为它们可能会导致问题。

如果这不起作用，您可以尝试另一种解决方案来代替元视口(viewport)修复或作为元视口(viewport)修复的补充。我链接的主题中有几条评论，涉及对 CSS 的一些更改。对此进行的更改并没有修复我的代码中的任何内容，但它至少帮助了一个人，因此值得检查一下您是否仍然需要解决方案。

我使用 iframe 和对象测试了此修复，但它不起作用 - InAppBrowser 仍然是必要的。

/主要编辑。

以下是一些对我有用的解决方法:

1. Use the InAppBrowser plugin 。这允许应用程序与 InAppBrowser 中加载的页面中的 loadstart/loadstop/loaderror 事件进行交互。这是我建议的解决方案。然而，在 iOS 7 中，您需要手动隐藏状态栏，解决方案是 here

2. 或使用 window.location.href = [网站 url] 加载页面。如果您不需要担心与应用程序交互或返回应用程序或链接到外部网站(这两个都是我需要的)，那么这就是要走的路。它非常简单，但缺少第一个解决方案的一些功能。

3. 或者摆脱 JQTouch。我无法做到这一点，但当您使用 PhoneGap 构建应用程序时，其中大部分都是多余的。