Cordova / Phonegap 3.4.0 iOS 7.1 - 键盘/ Web视图问题 [英] Cordova/Phonegap 3.4.0 iOS 7.1 - Keyboard / Web View issue
问题描述
我一直在努力解决这个问题一个多星期，真的会感激任何帮助，我可以得到。
I've been struggling with this issue for over a week now and would really appreciate any help I can get. I'll explain the issue as I understand it but please correct if I say anything incorrect.
在iOS 7.0.x中，当键盘显示时，网页视图是调整大小，以便键盘所占用的区域不被视为视口窗口大小的一部分。直到7.0，Cordova键盘插件处理此Web视图调整大小。因为7.0以所需的方式本地处理键盘显示，所以用于 config.xml 文件的键盘 shrinkView 在此提交之前的无操作：
In iOS 7.0.x, when the keyboard became revealed, the web view was resized so that the area that the keyboard took was not considered part of the viewport window size. Up until 7.0, the Cordova Keyboard plugin handled this web view resizing. Since 7.0 natively handled the keyboard reveal in the desired way, the Keyboard shrinkView option for the config.xml file became a "No-op" as of this commit:
https ：//github.com/apache/cordova-plugins/commit/20215013bf91b659b73d5f428ae91dd58be1273a
但是，在7.1中，键盘占据的区域超过了网络视图。这有一个痛苦的副作用。假设您要在包含textarea区域（例如留下评论或即时通讯回覆）的主体前面加上< div> ，例如：
However, in 7.1, the area the keyboard occupies comes up over the web view. This has a painful side-effect. Say you want to prepend a <div> to the body with a textarea area (like leaving a comment or chat reply), ie;
<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，居中输入字段。因为网络视图仍然考虑到屏幕的整个高度，所以div不会保持固定在底部，从而打破了布局。
Whenever you focus or input into the textarea, the web view will natively re-center the input field. Since the web view still takes the entire height of the screen into account, the div will not stay fixed to the bottom and thus breaks the layout.
我试过以下内容：
-
用CSS代替body和fixed div。位置固定/绝对似乎没有影响。
Futzing with the CSS for the body and fixed div. Position fixed/absolute doesn't seem to make a difference. Setting an explicit height to the body does nothing.
元视图选项的所有可能组合。这是我目前使用的：
All possible combinations of meta viewport options. This is what I'm currently using:
< 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键盘插件中的无操作。
Uncommenting the "No-op" in the cordova keyboard plugin. This still breaks the layout as it did in iOS 7.0.x.
在输入上拥有JS事件侦听器和 focus 事件，以保持计算底部偏移，以保持div在底部。
Having JS event listeners on the input and focus events to keep calculating the bottom offset to keep the div at the bottom. This is very jumpy because its battling the native web view behavior of centering the input field.
在显示键盘后更改元标记以设置明确的高度，这是非常跳跃的，因为它与正在输入字段的本地网络视图行为作斗争。 / hidden。
Altering the meta tag to set an explicit height after the keyboard is shown/hidden.
我使用Cordova 3.4.0-0.1.3
I'm using Cordova 3.4.0-0.1.3
有没有人遇到过这个问题？任何解决方案或想法？
Has anyone else experienced this issue? Any solutions or ideas?
推荐答案
看起来Ionic有一个多部分解决方案这个问题包括动态更新元视口标签在设备上，并通过挂接到键盘隐藏/显示事件，然后使用他们的滚动框架将输入滚动到视图。
It looks like Ionic has a multipart solution to this problem which includes dynamically updating the meta viewport tag depending on the device and also by hooking into the keyboard hide/show event and then using their scrolling framework to scroll the input into view.
更多信息在这里..
http://ionicframework.com/blog/ionic-keyboard/
More info here.. http://ionicframework.com/blog/ionic-keyboard/
这需要你使用他们的框架，所以我正在移植到JQuery和IScroll的过程中，我会让你更新我的进度。
This requires you to use their framework so I'm in the process of porting this over to JQuery and IScroll and I'll keep you updated on my progress.
我也在phonegap论坛上发布了我的phonegap键盘的经验，但还没有太多的反应。
https://groups.google.com/forum/# ！topic / phonegap / LE9-lIsNT2c
I also posted my experiences with the phonegap keyboard on the phonegap forum but have not had much response yet. https://groups.google.com/forum/#!topic/phonegap/LE9-lIsNT2c
这篇关于Cordova / Phonegap 3.4.0 iOS 7.1 - 键盘/ Web视图问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
