Keyboard hides input fields on Android WebView

问题

On my Android app I have an Activity with a layout of almost WebView element. In this WebView I am loading online form for the user to fill out. However, bottom input fields (Text boxes) stay behind the soft keyboard and the user is not able to fill them out.

What are possible solutions for this situation?

Here is my code:

AndroidManifest.xml (this layouts part only)

<activity
        android:name=".home.SurveyActivity"
        android:configChanges="orientation"
        android:icon="@drawable/logo_white"
        android:screenOrientation="portrait"
        android:windowSoftInputMode="adjustResize">

    </activity>

Layout file:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:id="@+id/custom_header"
        style="@style/CustomHeader.Height"
        android:layout_alignParentTop="true"/>

    <WebView
        android:id="@+id/activity_portal_webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/activity_portal_bottom_layout"
        android:layout_below="@id/custom_header"
        android:scrollbars="none"/>

    <LinearLayout
        android:id="@id/activity_portal_bottom_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="vertical">

    </LinearLayout>

</RelativeLayout>

Activity class:

public class SurveyActivity extends Activity {

    public static Intent makeIntent(Context context) {
        return new Intent(context, SurveyActivity.class);
    }

    @SuppressLint("SetJavaScriptEnabled")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Utils.updateLang();

        setContentView(R.layout.survey_activity_main);

        Utils.inflateCustomHeader(this);

        WebView webView = (WebView) findViewById(R.id.activity_portal_webview);

        webView.setWebChromeClient(new WebChromeClient());

        WebSettings webSettings = webView.getSettings();
        webSettings.setLoadsImagesAutomatically(true);
        webSettings.setDomStorageEnabled(true);
        webSettings.setJavaScriptEnabled(true);
        webSettings.setDefaultTextEncodingName("UTF-8");

        webView.loadUrl("WWW.EXAMPLE.COM");
    }

    @Override
    protected void onResume() {
        super.onResume();
        Utils.updateLang();

        LinearLayout navigationBar = (LinearLayout) findViewById(R.id.activity_portal_bottom_layout);
        navigationBar.removeAllViews();
        navigationBar.addView(NavigationBarContract.makeNavigationBar(this, R.id.navigation_bar_home_button));
    }
}

回答1:

I am not sure if this helps but my solution was to add some javascript to the webview to handle the resizing.

first you need two javascript functions, I called mine noFocus which moves the body back to the 0 position.

function noFocus() {
    console.log('unfocus');
    Android.resetWindow(); // this removes the naigation and status bar via an interface
    $('body').css("margin-top", "0px");
 }

another called hasFocus that decides weather to move the body up or not

function hasFocus(){
  var boxHeight = $(this).offset().top +60;
  var windowHei = $(window).height();
  var dTop      = boxHeight - (windowHei/2);
  // this logic may need to change depending on your implementation
  console.log('dtop' + dTop + ' as boxheight is ->' + boxHeight + 'windowHei ->' + windowHei )
if(boxHeight > (windowHei/2)) {
    $('body').css("margin-top", -dTop + "px");
}
this.addEventListener('blur', noFocus, false);
}

then you need to iterate through the DOM adding the below input listeners

var input = document.querySelectorAll('input');       
for (var i = 0; i < input.length; i++) {
    input[i].removeEventListener('focus', hasFocus, false)
    input[i].addEventListener('focus', hasFocus, false)
};

the only limitation with my approach is if the keyboard is dismissed then the noFocus is not called until the user touches outside the input field.

回答2:

A similar problem existed in Google Chrome on Android (see http://crbug.com/398112), and it also may affect Android WebView starting from KitKat. As you can't control which version of WebView users will have on their devices, it's better to provide a generic workaround.

For example, you can add a spacer div somewhere at the bottom of the page to make sure that the page is taller than the screen, and thus it can be scrolled to reveal the input fields.

来源：https://stackoverflow.com/questions/28654865/keyboard-hides-input-fields-on-android-webview