键盘使用iFrame /对象和JQTouch隐藏PhoneGap Build 3.1中的iOS输入字段 [英] Keyboard hides iOS input fields in PhoneGap Build 3.1 with an iFrame/object and JQTouch
问题描述
我正在开发一个将其他网站的表单加载到iFrame中的应用。显示时，iFrame设置为100％宽度和高度。该网站有JQTouch。
I'm developing an app that loads a form from another website into an iFrame. The iFrame is set to 100% width and height while displayed. That website has JQTouch.
当我在iPhone上触摸iOS 7中的输入字段时，键盘会弹出并覆盖输入字段。它不会滚动，调整大小，甚至让我向下滚动以查看输入字段。如果我输入然后关闭键盘，则没有任何反应。
When I touch an input field in iOS 7 on the iPhone, the keyboard pops up and covers the input fields. It doesn't scroll, resize, or even let me scroll down to see the input field. If I type and then close the keyboard, nothing happens.
我已经尝试过所有遇到过的事情。在元视口标记中添加/删除height = device-height没有做任何事情。最接近解决方案的是在config.xml中添加首选项KeyboardShrinksView = true。这使得它滚动（但不够），并永久地将网站推高约20px左右。
I've tried everything I've come across. Adding/removing height=device-height in the meta viewport tag didn't do anything. The thing that came closest to a solution was adding the preference "KeyboardShrinksView = true" in config.xml. That made it scroll (but not enough), and permanently pushes the site up about 20px or so.
我在过去的几天里一直在研究这个问题。解决方案在眼前。这是一个错误吗？它是JQTouch与PhoneGap Build交互的方式吗？
I've been working on this for the last couple days with no solution in sight. Is this a bug? Is it the way JQTouch is interacting with PhoneGap Build?
更新：仍然没有修复，但是为了测试我从iframe中取出表单页面并使用窗口设置它。 location.href = www.mywebsite.com;他们的键盘工作在那种情况下。这对我来说不是一个有效的解决方案，但可能会提供有关它无法正常工作的信息。
UPDATE: Still no fix, but to test I took the form's page out of the iframe and set it using window.location.href="www.mywebsite.com"; They keyboard works in that situation. This is not a valid solution for me (yet), but may provide info on why it's not working.
更新2：我正在重构应用程序以使用窗口。 location.href，而不是iframe或html对象。这会产生一些小问题，但这些问题比键盘不能正常工作要好。如果有人有答案，我仍然希望看到它。
UPDATE 2: I'm restructuring the app to use window.location.href, rather than an iframe or html object. This creates some small issues, but these are better than the keyboard not working. If anyone has an answer, I'd still like to see it.
推荐答案
主要编辑：我刚刚意识到InAppBrowser插件没有不要单独修复键盘错误。我做了一些更多的研究，这个主题帮助了。我必须在每个元视口标记中添加height = device-height。 width = device-width应修复在移动版Safari中查看网站的任何问题。最终结果如下：
Major I just realized the InAppBrowser plugin does NOT fix the keyboard bug alone. I did some more research, and this topic helped. I had to add "height=device-height" to every meta viewport tag. "width=device-width" should fix any problems viewing the site in mobile Safari. The final result is this:
<meta name="viewport" content="initial-scale=1, minimum-scale=1,
maximum-scale=1, user-scalable=0, height=device-height, width=device-width"/>
其中一个还有一个分号，所以一定要检查并仔细检查语法错误，因为它们可能会导致问题。
One of these also had a semicolon thrown in there, so be sure to check and double-check for syntax errors, as they may cause the problem.
如果这不起作用，您可以尝试使用另一种解决方案来代替或补充元视口固定。在我链接的主题中有几条评论，并涉及对CSS的一些更改。对此进行的更改并未修复我的代码中的任何内容，但它至少帮助了一个人，因此如果您仍需要解决方案，则值得查看。
If this doesn't work, there is another solution that you might try in place of or in addition to the meta viewport fix. It's several comments down in that topic I linked and involves some changes to the CSS. Changes to this didn't fix anything in my code, but it helped at least one person, so it's worth checking out if you still need a solution.
我测试了这个修复iframe和对象，但它不起作用 - 仍然需要InAppBrowser。
I tested this fix with iframe and object, and it didn't work--InAppBrowser is still necessary.
/ Major Edit。
/Major Edit.
以下是一些对我有用的解决方法：
Here are some workarounds that worked for me:
-
使用InAppBrowser插件。这允许应用程序与InAppBrowser中加载页面中的loadstart / loadstop / loader错误事件进行交互。这是我建议的解决方案。但是，对于iOS 7，您需要手动隐藏状态栏，其解决方案是这里
Use the InAppBrowser plugin. This allows the app to interact with loadstart/loadstop/loaderror events in the loaded page within the InAppBrowser. This is the solution I suggest. However, with iOS 7, you will need to hide the status bar manually, the solution for which is here
或者使用window.location.href = [website url]加载页面。如果您不需要担心与应用程序交互或返回应用程序或链接到外部站点（我都需要），这就是您要走的路。这很简单，但缺少第一个解决方案的一些功能。
OR Load the page using window.location.href = [website url]. If you don't need to worry about interacting with or returning to the app or linking to external sites (both of which I needed), this is the way to go. It's pretty simple, but lacks some of the functionality of the first solution.
或摆脱JQTouch。我无法做到这一点，但当您使用PhoneGap构建应用程序时，大部分内容都是多余的。
OR Get rid of JQTouch. I wasn't able to do this, but much of it is redundant when you're building an app with PhoneGap.
这篇关于键盘使用iFrame /对象和JQTouch隐藏PhoneGap Build 3.1中的iOS输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
