android软键盘遮挡WebView中input的解决方案

现象

在做hybrid应用时，我们用WebView来加载html页面，经常会出现软件盘弹出，遮挡了html中输入控件（如input）的问题。
无论你是用系统的原生WebView（从4.0-7.0），还是Crosswalk的XWalkView，都有这个问题！ （用系统原生浏览器是没有这个问题的）
这里不得不吐槽一下，ios没有这个问题。

解决方案有以下几种：

1. 软键盘弹出时WebView高度缩小。
2. 软键盘弹出时，WebView内容适当上移。

个人比较喜欢第二个方案，因为：

1. 与IOS体验一致
2. 页面不需要重新布局，避免了有些页面在WebView高度缩小后，布局样式体验不好；

1 软键盘弹出时WebView高度缩小（网上大多数也都是说的这个方案）

设置页面adjustResize

android:windowSoftInputMode="adjustResize"

原理是软件盘弹出时，整个页面的大小都缩小了，软键盘不再遮挡WebView了，这个问题自然也就不存在了。

这个方案最简单。但有时不太好用，如果页面是上下有固定布局，中间滚动区域（如上标题栏，下方操作按钮，中间是可以滚动的信息输入区域）。点击中间滚动区域的输入框，软键盘弹出，会把底部布局也顶上去，导致中间滚动区域可能高度很小了，显示效果很差。一
一个办法是软键盘弹出时，底部布局隐藏。

window.addEventListener("resize", (v) => {
    this.LastWindowHeight = this.CurWindowHeight;
    this.CurWindowHeight = window.innerHeight;
    if ((this.LastWindowHeight - this.CurWindowHeight) /this.LastWindowHeight > 0.25){
        //hide bottom buttons
    }else{
        //display bottom buttons
    }
});

2 软键盘弹出时，WebView内容适当上移

软键盘弹出时，WebView可视区域变小了，可以计算WebView的实际高度，可视高度，将这些数据传入js，js层根据当前的焦点位置，根据需要上移body。

android:windowSoftInputMode="adjustPan"

public static class HeightVisibleChangeListener implements ViewTreeObserver.OnGlobalLayoutListener {

        private WebView webview;
        public HeightVisibleChangeListener(WebView webView){
            this.webview = webView;
            webview.getViewTreeObserver().addOnGlobalLayoutListener(this);
        }

        int lastHeight;
        int lastVisibleHeight;

        @Override
        public void onGlobalLayout() {
            Rect visible = new Rect();
            Rect size = new Rect();
            webview.getWindowVisibleDisplayFrame(visible);
            webview.getHitRect(size);

            int height = size.bottom-size.top;
            int visibleHeight = visible.bottom - visible.top;

            if(height == lastHeight && lastVisibleHeight == visibleHeight) return;

            lastHeight = height;
            lastVisibleHeight = visibleHeight;
            String js = String.format("javascript:heightChange(%1$d , %2$d)",height,visibleHeight);
            webview.loadUrl(js);
        }

    };

初始化webview的时候，初始化一下这个类即可。

new HeightVisibleChangeListener(webView);

上层代码，这里用的是ts

export class KeyboardUtil {

    private static height:number;
    private static visibleHeight:number;

    //android adjustpan 模式下，软键盘遮挡输入框。
    static FixAndroidKeyBoardHideInput(){
        window['heightChange'] = (height :number , visibleHeight:number)=>{
            KeyboardUtil.OnHeightChange(height,visibleHeight);
        }
    }

    static OnHeightChange(height :number , visibleHeight:number):void{
        const body = document.body;
        KeyboardUtil.height = body.clientHeight;
        KeyboardUtil.visibleHeight = visibleHeight * body.clientHeight /height;

        const active = document.activeElement as HTMLElement;

        if(height == visibleHeight){
            KeyboardUtil.SetElementScrollTop(body , 0);
            return;
        }

        let focusTopRelateWindow = KeyboardUtil.FindElementPositionRelateToWindow(active);
        let focusBottomRelateWindow = focusTopRelateWindow + active.clientHeight;
        const mindistince = 50;
        let bottom = focusBottomRelateWindow + mindistince;
        if(bottom > KeyboardUtil.height) bottom = KeyboardUtil.height;

        const offset = bottom - KeyboardUtil.visibleHeight;

        if(offset <=0){
            KeyboardUtil.SetElementScrollTop(body , 0);
            return;
        }

        KeyboardUtil.SetElementScrollTop(body , offset);

    }

    static SetElementScrollTop(e : HTMLElement , offset : number){
        if(offset == 0){
            e.style.top = '0';
        }else{
            e.style.top = '-'+offset +'px';
        }
    }

    static FindElementPositionRelateToWindow(element: HTMLElement) {
        let curtop = 0;
        let curtopscroll = 0;
        if (element.offsetParent) {
            do {
                curtop += element.offsetTop;
                curtopscroll += element.offsetParent ? element.offsetParent.scrollTop : 0;
            } while (element = element.offsetParent as HTMLElement);


        }
        return curtop - curtopscroll; 
    }
}