javascript Cordova/Phonegap 3.1 键盘（仍然）覆盖聚焦的表单字段 - iOS 7
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19237918/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Cordova/Phonegap 3.1 keyboard (still) overlays focused form fields - iOS 7
提问by Alex
Hi guys I just upgraded from cordova 3.0 to 3.1 and I'm still experiencing a very disturbing issue (which still exists when playing with KeyboardShrinksView preference).
大家好，我刚刚从cordova 3.0 升级到3.1，但我仍然遇到一个非常令人不安的问题（在使用KeyboardShrinksView 首选项时仍然存在）。
Whenever I'm focusing an element (input/textarea) which triggers the keyboard opening, the element gets hidden behind the keyboard and I need to scroll down (using webkit-overflow-scrolling for scrolling by the way) in order to see the element and its content.
每当我聚焦一个触发键盘打开的元素（输入/文本区域）时，该元素就会隐藏在键盘后面，我需要向下滚动（顺便使用 webkit-overflow-scrolling 进行滚动）才能看到该元素及其内容。
When KeyboardShrinksView is set to true the page won't even scroll, making it even worse.
当 KeyboardShrinksView 设置为 true 时，页面甚至不会滚动，这让情况变得更糟。
Any solutions in order to fix this issue? I've seen a few questions and bug reports but with no working solutions (or solutions at all).
任何解决方案来解决这个问题？我看到了一些问题和错误报告，但没有可行的解决方案（或根本没有解决方案）。
Playing with the "fullscreen" preference won't solve the problem.
使用“全屏”首选项并不能解决问题。
Thanks for your help
谢谢你的帮助
采纳答案by andypaxo
Just had a very similar problem to this. Some of the hacks found on this site did work, but had nasty side effects (such as making a mess of scrolling or CSS layout). Finally came up with a brand new stupid hack.
刚刚遇到了与此非常相似的问题。在这个网站上发现的一些黑客确实有效，但有令人讨厌的副作用（例如使滚动或 CSS 布局变得一团糟）。终于想出了一个全新的愚蠢的黑客。
Viewport meta tag:
视口元标记：
<meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width" />
JavaScript run after load:
加载后运行 JavaScript：
document.body.style.height = screen.availHeight + 'px';
And that's it. Works on iOS 7 and I have no idea why.
就是这样。适用于 iOS 7，我不知道为什么。
回答by Alex
Finally fixed the problem with the help of the following plugin: jQuery scrollTo plugin
最后借助以下插件解决了问题：jQuery scrollTo 插件
Whenever i'm focusing on an element i'm triggering a focus event which does the following calculations and updates the scroll position:
每当我关注一个元素时，我都会触发一个焦点事件，它会执行以下计算并更新滚动位置：
updateScroll: function(e){
var el = $(e.currentTarget);
var offset = -$(".scrollerWrap").height() + $(el).height();
$(".scrollerWrap").scrollTo(el,{offset: offset});
}
Sticks the bottom of the input/textarea to the top of the keyboard. Works like a charm, even if the solution needs to go through that bit of JavaScript.
将输入/文本区域的底部粘贴到键盘的顶部。即使解决方案需要通过那一点 JavaScript，它也能像魅力一样工作。
回答by Siddhartha Gupta
Well, logically the view should move up when the keyboard opens. I have faced a similar issue with iOS7 and to fix it I have applied few css tweaks.
好吧，从逻辑上讲，当键盘打开时，视图应该向上移动。我在 iOS7 上遇到了类似的问题，为了解决这个问题，我应用了一些 css 调整。
Tweaks were applied on the wrapper class/id which is containing the content of the app.
对包含应用程序内容的包装器类/ID 应用了调整。
position: relative;
overflow: hidden;
height: 460px;
width: 320px;
Note - Height and width are judged dynamically depending on the device height and width
注 - 高度和宽度根据设备高度和宽度动态判断
height = window.innerHeight
width = window.innerWidth
By using jQuery selectors height and width are appended to wrapping class/id.
通过使用 jQuery 选择器，高度和宽度被附加到包装类/ID。
回答by Juan Lombana
Works for me.
对我来说有效。
document.body.style.height = (screen.availHeight - 100) + 'px';
回答by Patrick Ogbuitepu
I think the issue here originates from Framework7.
我认为这里的问题源于 Framework7。
document.body.style.height = window.outerHeight + 'px';
The above code placed in my index.js file worked like charm.
上面放置在我的 index.js 文件中的代码很有魅力。
