2

我刚开始使用 Maqetta 为 Android 和 WindowsPhone 上的 phonegap 创建一个移动应用程序。该应用程序包含一些带有文本输入的网页，因此我需要软键盘才能工作。

我的问题是键盘在两个操作系统上的反应完全不同。在 windows phone 上，当我单击文本框时，键盘会显示并覆盖其下方的所有内容。要到达其他文本框，我仍然可以在显示我的网站的字段中滚动并选择它。另外，这对我来说很重要，网站没有被压缩。这正是我想要的。

在 Android 上，事情要复杂一些。经过大量研究，我偶然发现了这些人：

android:windowSoftInputMode="adjustResize" 和 android:windowSoftInputMode="adjustPan"

我都试过了，但都不符合我的需要。adjustRezise 压缩了我的网站（因为网站的高度：100%）并且 adjustPan 覆盖了它下面的所有内容，没有任何可能到达它（除了关闭键盘并为每个文本框重新打开它//并且必须在没有看到你输入的内容的情况下输入） .

我也听说过 ScrollViews 和类似的东西，但由于我是这个主题的新手，我不知道这到底是什么以及如何使用它，因为我专注于应用程序的 html 和 css 部分，所以如果您有任何提示，请记住，我可能需要一些信息才能理解。;)

如果你们中的一个人能帮助我解决这个问题，我会非常高兴。我希望有一个解决方案。

4

1 回答 1

2

设置高度：150% 对我不起作用。即使没有足够的内容滚动，它也使页面可滚动。以下解决方案（混合 CSS 和 Javascript）适用于：

  1. 在 CSS 中：我保持 app/HTML 的高度：100%；和溢出-y：自动；

    #container {
   height: 100%;
   overflow-y: auto;
}

  2. 检测焦点文本区域或输入，然后等待一段时间，直到显示键盘，最后滚动页面以达到焦点输入。

    $("#textarea").focus(function(e) {
    var container = $('#container'),
    scrollTo = $('#textarea');

    setTimeout((function() {
       container.animate({
       scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
       });
    }), 500);

});

    当键盘隐藏时，文本区域保持焦点，因此如果再次单击它，键盘将显示并且容器需要再次滚动以显示输入

    $("#textarea").click(function(e) {
    e.stopPropagation();
    var container = $('#container'), //container element to be scrolled, contains input
    scrollTo = $('#textarea');

    setTimeout((function() {
        container.animate({
        scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
      });
    }), 500);
});
于 2015-10-06T17:15:30.003 回答