android - Android 上的 Phonegap : Layout scrollable when using keyboard

Question

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

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

在 Android 上，事情有点复杂。在做了很多研究之后，我偶然发现了这些人:

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

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

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

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

Answer 1

设置高度: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);
   });