IT이야기

Android webview에서 키보드 아래에 숨겨진 텍스트 상자

cyworld 2021. 10. 9. 14:38
반응형

Android webview에서 키보드 아래에 숨겨진 텍스트 상자


일반 webview를 포함하는 간단한 iPhone/Android 앱을 만들었습니다. 이 webview는 내 웹사이트를 호출합니다.

내 웹 사이트에는 입력 유형=텍스트 또는 텍스트 영역이 있는 여러 양식이 있습니다. 페이지 하단에 있을 때 문제가 있습니다!

1) 내 iPhone 앱에서 키보드가 자동으로 나타나고 텍스트 상자를 전화 화면의 보이는 영역으로 밀어 넣습니다. 그래서 할 일이 없습니다.

2) 그러나 내 Android 앱에서 텍스트 상자는 같은 위치에 유지되고 결국 내 키보드에 의해 숨겨집니다. 따라서 사용자가 선택할 수 있는 유일한 옵션은 "blind"를 입력하는 것입니다.

이 문제를 해결하려면 어떻게 해야 하나요? 다른 사람이이 문제를 만났습니까?


이것이 내가 문제를 해결한 방법입니다. Venky가 말했듯이 추가해야합니다.

android:windowSoftInputMode="adjustResize"

AndroidManifest.xml 파일의 태그에 추가합니다. 그러나 우리의 경우에는 충분하지 않았습니다. 보기, 웹 보기 등에서도 이 작업을 수행해야 합니다. 그런 다음 마침내 작동하게 만들었습니다.


나는 미친 듯이 아무것도 작동하지 android:windowSoftInputMode="adjustResize"않지만 도움 될 수 있지만 앱이 전체 화면으로 표시되지 않도록 해야 합니다.

내 앱의 전체 화면을 제거하면 소프트 키보드로 레이아웃 크기 조정 문제가 해결되었습니다.

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

이것은 작동합니다:

getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE);


이 문제를 해결하는 동안 배운 몇 가지 --- 1. 테마 스타일에 Fullscreen True가 포함되어서는 안 됩니다. 2. android:windowSoftInputMode="adjustResize" 추가 3. android:scrollbars="none" 제거 is any... . 건배!


제 경우에는 다음과 같이 성공했습니다.

  1. 매니페스트, 웹뷰 및 프래그먼트에 아래 추가:

    android:windowSoftInputMode="adjustResize"
    
  2. 아래와 같은 NON FullScreen 테마 사용:

    <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>
    
  3. WebView를 통해 ScrollView를 사용하지 않습니다.

전체 화면 모드의 활동의 경우 android:windowSoftInputMode="adjustResize"는 작동하지 않습니다.

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

전체 화면 창은 창의 softInputMode 필드에 대한 SOFT_INPUT_ADJUST_RESIZE 값을 무시합니다. 창은 전체 화면으로 유지되고 크기가 조정되지 않습니다.

활동에서 다음 방법을 사용하여 하단 패딩을 설정하여 레이아웃 크기를 조정합니다.


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

예, 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);

}


제안 답변과 별도로

android:windowSoftInputMode="adjustResize"

Is not working when you are in immersive mode

ReferenceURL : https://stackoverflow.com/questions/7026854/textbox-hidden-below-keyboard-in-android-webview

반응형