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

Question

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

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

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

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

我都尝试过，但都不符合我的需要。 adjustmentRezise 压缩我的网站(因为网站高度:100%)，并且 adjustmentPan 覆盖其下方的所有内容，而无法访问它(除了关闭键盘并为每个文本框重新打开它//并且必须在看不到您键入的内容的情况下键入) .

我也听说过 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);
   });