Question

我刚刚开始在Android和WindowsPhone上使用Maqetta为手机屏幕创建移动应用程序。该应用程序包括一些带文本输入的网页，所以我需要软键盘才能工作。

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

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

android：windowSoftInputMode =“adjustResize”和机器人：windowSoftInputMode = “adjustPan”

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

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

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

Answer 1

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

在CSS中：我保持app / HTML的高度：100％;和overflow-y：auto;
```
#container {
   height: 100%;
   overflow-y: auto;
}
```

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

$("#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);
});

Android上的Phonegap：使用键盘时可以滚动布局

1 个答案: