Question

在我的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));
    }
}

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

Answer 2

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

例如，您可以在页面底部的某处添加spacer div，以确保页面高于屏幕，因此可以滚动显示输入字段。

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

2 个答案: