Android webview中输入框被键盘遮挡

Question

Android webview中输入框被键盘遮挡

androidtextboxkeyboardwebviewhidden

62

我创建了一个简单的iPhone/Android应用程序，包含一个常规的Web视图。这个Web视图调用我的网站。

在我的网站上有几个表单，其中包含文本输入框或文本区域。当它们位于页面底部时，我遇到了一个问题！

1）在我的iPhone应用程序中，键盘会自动出现并将文本框推送到手机屏幕的可见区域。所以什么也不用做。

2）但在我的Android应用程序中，文本框将保持在原地，并最终被键盘隐藏。因此，用户唯一的选择是“盲打”。

如何解决这个问题？有其他人遇到过这个问题吗？

- andreas

你能展示一下你遇到问题的页面底部截图吗？ - Lalit Poptani

1

请查看此链接。尝试一下，这些可能会对您有所帮助。 - Venky

感谢您的回答。在AndroidManifest.xml中，我已经在>android:screenOrientation="portrait"<之后添加了>android:windowSoftInputMode="adjustResize"<。我猜这是正确的放置位置？但它没有起作用。这是否还取决于我的webview，我也应该在xml中编辑一些内容？ - andreas

这是全屏模式的解决方案： https://dev59.com/XGs05IYBdhLWcg3wJurp#19494006 - Morteza Rastgoo

8个回答

28

我已经疯了，什么都不起作用。android:windowSoftInputMode="adjustResize"可能会有所帮助，但请确保您的应用程序没有全屏显示。

将我的应用程序退出全屏模式解决了键盘弹出时布局大小调整的问题。

<item name="android:windowFullscreen">false</item>

- Sandro

6

我需要我的应用程序全屏显示，有没有办法让它全屏显示（即没有标题/警报栏），并且键盘不会覆盖字段？ - CiscoIPPhone

2

是的，我也需要我的应用程序全屏显示。你有解决方案吗？ - jayellos

1

不好意思，由于在解决这个问题上浪费了太多时间，我选择不使用全屏应用程序。如果您找到了任何解决方案，请添加您的解决方案。 - Sandro

我有同样的问题。我想让我的应用程序全屏显示。 - Shirish Herwade

5

我也使用了 android:theme="@android:style/Theme.NoTitleBar.Fullscreen" ，这个设置会阻止 adjustResize 的正常工作。只使用 android:theme="@android:style/Theme.NoTitleBar" 就可以使 adjustResize 正常工作。 - Gady

显示剩余2条评论

11

对于全屏模式下的活动，android:windowSoftInputMode="adjustResize" 将无法工作。

https://developer.android.com/reference/android/view/WindowManager.LayoutParams.html#FLAG_FULLSCREEN

全屏窗口将忽略窗口的 softInputMode 字段中 SOFT_INPUT_ADJUST_RESIZE 的值；该窗口将保持全屏且不会调整大小。

我在活动中使用以下方法通过设置底部 padding 来调整布局：


    public void adjustResizeOnGlobalLayout(@IdRes final int viewGroupId, final WebView webView) {
        final View decorView = getWindow().getDecorView();
        final ViewGroup viewGroup = (ViewGroup) findViewById(viewGroupId);

        decorView.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            public void onGlobalLayout() {
                DisplayMetrics displayMetrics = getResources().getDisplayMetrics();
                Rect rect = new Rect();
                decorView.getWindowVisibleDisplayFrame(rect);
                int paddingBottom = displayMetrics.heightPixels - rect.bottom;

                if (viewGroup.getPaddingBottom() != paddingBottom) {
                    // showing/hiding the soft keyboard
                    viewGroup.setPadding(viewGroup.getPaddingLeft(), viewGroup.getPaddingTop(), viewGroup.getPaddingRight(), paddingBottom);
                } else {
                    // soft keyboard shown/hidden and padding changed
                    if (paddingBottom != 0) {
                        // soft keyboard shown, scroll active element into view in case it is blocked by the soft keyboard
                        webView.evaluateJavascript("if (document.activeElement) { document.activeElement.scrollIntoView({behavior: \"smooth\", block: \"center\", inline: \"nearest\"}); }", null);
                    }
                }
            }
        });
    }

- SiuFay

使用此答案中的javascript代码对我有效，我以不同的方式运行它，但效果非常好！document.activeElement.scrollIntoView({behavior: "smooth", block: "center", inline: "nearest"}) - Daniel Silva

9

这样做可以起作用： getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE); 该代码与调整窗口大小以适应软键盘相对应。

- Tsasaa

3

在解决这个问题时，我学到了几件事情 --- 1. 主题样式不应包含Fullscreen True 2. 添加android:windowSoftInputMode="adjustResize" 3. 如果有的话，删除android:scrollbars="none"... 干杯！

- surajitk

2

在我的情况下，成功的实现取决于以下因素：

Adding below to manifest, webview and fragment:
```
android:windowSoftInputMode="adjustResize"
```

Using NON FullScreen Theme such as below:

<style name="AppTheme" parent="android:Theme.Black.NoTitleBar">
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowActionBar">false</item>
    <item name="android:windowFullscreen">false</item>
</style>

NOT using ScrollView over WebView.

- Pawel

2

请注意，除了建议的答案之外，

android:windowSoftInputMode="adjustResize"

当您处于沉浸式模式时，不起作用

- unlimited101

0

是的，我也遇到了同样的问题，在使用Webview时，我的问题出现在模态框上的输入字段上。文本字段没有在键盘上方“聚焦”。解决方法是延迟函数调用。希望有人会发现这个有用。

   $("body").on("click", ".jstree-search-input", function () {  

    setTimeout(function(){ 
        androidScroll(); 
    }, 500);
    });

正如您所看到的，它用于jstree输入...

   function androidScroll() {
    // Webview focus call (pushes the modal over keyboard)
        $('.control-sidebar-open ').scrollTop($('.control-sidebar-open ')[0].scrollHeight);

}

- Denis Solakovic

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- andreas · Accepted Answer

55

这是我解决问题的方法。正如Venky所说，您必须添加

android:windowSoftInputMode="adjustResize"

在AndroidManifest.xml文件中添加标签是不够的，我们的情况需要确保您的视图、Web视图等也遵循这样做。最后，我们终于让它工作了。

- andreas

3

嗨 @andreas，我试着按照你和Sandro的想法，创建了以下样式代码，并将其应用于我的WebView:

<style name="StyleWindowSoftInputModeAdjustResize" >         <item name="android:windowSoftInputMode">adjustResize</item>         <item name="android:windowFullscreen">false</item>     </style>

然后在WebView中使用该样式WebView webview = new WebView(this, null, R.style.StyleWindowSoftInputModeAdjustResize);但是当我点击WebView中加载的某个输入框时，软键盘没有弹出... 我的WebView位于HorizontalScrollView内，而HorizontalScrollView又位于vertical ScrollView内。 - George

@congliu，你能找到任何解决方案吗？我遇到了同样的问题。 - PankajAndroid

1

这听起来可以用于Android开发。但是对于Appcelerator Titanium开发呢？这种东西有它的用处，但它只适用于Android应用程序，而不适用于移动Web应用程序（我尝试过）。事实上，它会给我一个错误，因为该值的命名空间对于移动网站不可用:/ 如果您没有Titanium开发经验并且不知道答案，我会理解的。 - vbullinger

4

请注意，如果您使用了 windowFullscreen="true" 或 android:theme="一些包含 windowFullScreen=true 的样式"，例如 android:theme="@android:style/Theme.NoTitleBar.Fullscreen"，那么 windowSoftInputMode 将不起作用。 - Juan José Melero Gómez

1

除了全屏模式外，将状态栏设置为半透明(android:windowTranslucentStatus = true)也会阻止adjustResize的工作。 - geoffliu

显示剩余9条评论