Cordova/Phonegap 3.1 键盘（仍然）覆盖焦点表单字段 - iOS 7

Posted 2023-03-06

【中文标题】Cordova/Phonegap 3.1 键盘（仍然）覆盖焦点表单字段 - iOS 7

【英文标题】：Cordova/Phonegap 3.1 keyboard (still) overlays focused form fields - iOS 7

【发布时间】：2013-10-14 19:09:50

【问题描述】：

我刚刚从 cordova 3.0 升级到 3.1，我仍然遇到一个非常令人不安的问题（在使用 KeyboardShrinksView 偏好设置时仍然存在）。

每当我关注触发键盘打开的元素（输入/文本区域）时，该元素都会隐藏在键盘后面，我需要向下滚动（顺便使用 webkit-overflow-scrolling 进行滚动）以便查看元素及其内容。

当 KeyboardShrinksView 设置为 true 时，页面甚至不会滚动，更糟糕的是。

有什么解决方案可以解决这个问题吗？我看到了一些问题和错误报告，但没有有效的解决方案（或根本没有解决方案）。

使用“全屏”偏好设置并不能解决问题。

【问题讨论】：

看this answer。它为我修好了。

很好的答案！感谢分享，它会自动为键盘工作，但不幸的是我的固定标题被隐藏了（它不再固定并随着视图滚动）。这部分有什么解决方案吗？干杯

【参考方案1】：

刚刚遇到了与此非常相似的问题。在这个网站上发现的一些 hack 确实有效，但有一些令人讨厌的副作用（例如弄乱滚动或 CSS 布局）。终于想出了一个全新的愚蠢的黑客。

视口元标记：

<meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width" />

加载后运行 javascript：

document.body.style.height = screen.availHeight + 'px';

就是这样。在 ios 7 上运行，我不知道为什么。

【讨论】：

这对我来说很完美。我在使用键盘时遇到了其他问题，需要我在视口元数据中设置height=device-height，从而导致主体高度（100%）考虑到顶栏。我将您的代码与gist.github.com/shazron/6602131 的代码结合起来，之后一切顺利。

这是天才。我也不知道为什么它也有效，但它确实有效！谢谢！

【参考方案2】：

在以下插件的帮助下终于解决了这个问题：jQuery scrollTo plugin

每当我关注一个元素时，我都会触发一个焦点事件，该事件会执行以下计算并更新滚动位置：

updateScroll: function(e)
    var el = $(e.currentTarget);
    var offset = -$(".scrollerWrap").height() + $(el).height();
    $(".scrollerWrap").scrollTo(el,offset: offset);

将输入/文本区域的底部粘贴到键盘的顶部。工作起来就像一个魅力，即使解决方案需要通过那一点 JavaScript。

【讨论】：

好吧，我还没有亲自尝试过，但是在某处看到 scrollTo 在 iOS7 中无法与 safari 一起使用。

非常适合我 :)

@Alex：请提供更多关于如何使用它的细节？

是的，请提供更多详细信息，我真的需要它:(

首先附加一个将调用 updateScroll 函数的 JS 处理程序。 el = 您点击的文本区域。 scrollerWrap 类附加到可滚动内容的包装器 div。 offset 变量的值等于页面的顶部高度减去文本区域的大小（如果您使用诸如 elastictxt.js 之类的插件，它可能会有所不同）。它允许将文本区域设置在用户舒适的位置。如果您需要任何其他详细信息，请告诉我。

【参考方案3】：

好吧，从逻辑上讲，当键盘打开时视图应该向上移动。我在 iOS7 上遇到过类似的问题，为了解决这个问题，我应用了一些 CSS 调整。

在包含应用内容的包装类/ID 上应用了调整。

position: relative;
overflow: hidden;
height: 460px;
width: 320px;

注意 - 高度和宽度是根据设备高度和宽度动态判断的

height = window.innerHeight
width = window.innerWidth

通过使用 jQuery 选择器，高度和宽度被附加到包装类/id。

【讨论】：

感谢您的帮助。我检查了我的包装类高度，它正在改变键盘是否显示，但内容没有“滚动到”焦点输入/文本区域，因此必须滚动我自己来查看它。我还在用javascript测试一些其他的东西，我会让你知道结果。

【参考方案4】：

为我工作。

document.body.style.height = (screen.availHeight - 100) + 'px';

【参考方案5】：

我认为这里的问题源于 Framework7。

document.body.style.height = window.outerHeight + 'px';

上面的代码放在我的 index.js 文件中就像魅力一样。