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

问题描述

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

I just started creating a mobile application with Maqetta for phonegap on Android and WindowsPhone. The application includes some webpages with text-input so I need the soft-keyboard to work.

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

My problem is that the keyboard reacts totally different on the two operating systems. On windows phone, when I click a text box, the Keyboard shows up and covers all the things that are located underneath it. To reach the other text boxes, I can still scroll in the field that shows my website and select it. In addition, which is quite important for me, the website is not compressed. That is exactly what I want.

在Android上，情况要复杂一些.经过大量研究后，我偶然发现了这些家伙:

On Android, things are a little more complicated. After doing a lot of research I stumbled upon these guys:

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

android:windowSoftInputMode="adjustResize" andandroid:windowSoftInputMode="adjustPan"

我都尝试过，但是都不能满足我的需求.AdjustRezise压缩我的网站(因为该网站的高度为100％)，并且AdjustPan覆盖了它下面的所有内容，而无法访问它(除了关闭键盘并为每个文本框重新打开////且必须键入而看不到您键入的内容)

I have tried both, but both do not fit my needs.adjustRezise compresses my website (because the website is height:100%) and adjustPan covers everything underneath it without any possibility to reach it (except for closing the keyboard and reopening it for every textbox // and having to type without seeing what you type).

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

I have also heard about ScrollViews and stuff like that, but as I am new to this topic i have no clue what the heck that is and how to use it, because i am focusing on the html and css part of the app, so if you have any tips there please keep in mind that it might take some information for me to understand. ;)

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

I would be very happy if one of you could help me with this problem. I hope there is a solution.

推荐答案

设置高度:150％对我不起作用.即使没有足够的内容可滚动，它也使页面可滚动.以下解决方案(混合了CSS和Javascript)适用于:

Setting height: 150% did not work for me. It made page scrollable even if there is not enough content to scroll. Following solution (mixed of CSS & Javascript) worked for:

1. 在CSS中:我保持应用程序/HTML的高度:100％；并溢出-y:自动；

1. In CSS: I kept height of app/HTML: 100%; and overflow-y: auto;

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

检测重点文本区域或输入，然后等待一会儿直到显示键盘，最后滚动页面以达到重点输入.

Detect focused textarea or input, then wait a while until keyboard is shown and finally scroll the page to reach focused input.

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

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

});

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

When keyboard is hidden the text-area keeps focused, so if it's clicked again the keyboard will show and the container needs to scroll again to show the input

$("#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:使用键盘时可滚动的布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！