键盘隐藏 Android WebView 上的输入字段答案

【问题标题】：Keyboard hides input fields on Android WebView键盘隐藏 Android WebView 上的输入字段
【发布时间】：2015-02-22 05:26:11
【问题描述】：

在我的 Android 应用程序中，我有一个 Activity，其布局几乎是 WebView 元素。在这个 WebView 中，我正在加载在线表格供用户填写。但是，底部输入字段（文本框）位于软键盘后面，用户无法填写。

这种情况有哪些可能的解决方案？

这是我的代码：

AndroidManifest.xml（仅此布局部分）

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

    </activity>

布局文件：

<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>

活动类：

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));
    }
}

【问题讨论】：

但是网页视图可以滚动，用户可以滚动并移动到特定的输入字段
@Fahim 你说得对，我在模拟器上测试时是这样，但在我的 Android 4.4.4 设备 Galaxy A3 上不是这样。
你能在 webview 上试试 android:layout_height="wrap_content"

标签： android webview android-webview android-softkeyboard

【解决方案1】：

我不确定这是否有帮助，但我的解决方案是向 webview 添加一些 javascript 来处理大小调整。

首先你需要两个 javascript 函数，我调用了我的 noFocus，它将身体移回 0 位置。

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

另一个叫做 hasFocus 的方法决定天气是否让身体向上移动

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);
}

然后您需要遍历 DOM 添加以下输入侦听器

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)
};

我的方法的唯一限制是，如果键盘被关闭，那么在用户触摸输入字段之外之前不会调用 noFocus。

【讨论】：

【解决方案2】：

Android 上的 Google Chrome 也存在类似问题（请参阅http://crbug.com/398112），它也可能会影响从 KitKat 开始的 Android WebView。由于您无法控制用户在其设备上使用的 WebView 版本，因此最好提供通用的解决方法。

例如，您可以在页面底部的某处添加一个分隔符 div，以确保页面高于屏幕，从而可以滚动显示输入字段。

【讨论】：