键盘使用 iFrame/object 和 JQTouch 隐藏 PhoneGap Build 3.1 中的 iOS 输入字段

Posted 2023-03-07

【中文标题】键盘使用 iFrame/object 和 JQTouch 隐藏 PhoneGap Build 3.1 中的 iOS 输入字段

【英文标题】：Keyboard hides iOS input fields in PhoneGap Build 3.1 with an iFrame/object and JQTouch

【发布时间】：2013-12-13 21:34:39

【问题描述】：

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

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

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

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

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

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

【问题讨论】：

我遇到了同样的问题。您找到解决方法了吗？

我想出了几个解决方法。我会把它们作为答案发布。

【参考方案1】：

主要编辑：我刚刚意识到 InAppBrowser 插件并不能单独修复键盘错误。我做了更多的研究，this topic helped。我必须在每个元视口标签中添加“height=device-height”。 “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"/>

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

如果这不起作用，您可以尝试另一种解决方案来代替或补充元视口修复。在我链接的那个主题中有几个 cmets，涉及对 CSS 的一些更改。对此的更改并没有解决我的代码中的任何问题，但它至少帮助了一个人，所以如果您仍然需要解决方案，值得一试。

我使用 iframe 和对象测试了此修复程序，但没有成功 - InAppBrowser 仍然是必需的。

/主要编辑。

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

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

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

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

【讨论】：

#win "height=device-height" 为我做了！我不是 100% 确定这将如何影响页面渲染的各个方面，但它修复了我正在寻找的东西！非常感谢@daniel-miller

@Red2678 - 在我添加 device=device-width 之前，我实际上在 Safari 中打开网站时遇到了问题。我现在会把它放在其他任何需要它的人的答案中，但是在我添加之后，它看起来已经修复了。