使用MUI 软键盘弹起挤压页面

在使用mui和H5+进行移动端开发的时候，经常会遇见需要用户输入的情况。当input获取焦点弹起软键盘的时候，经常会遇见软键盘挤压页面、软键盘遮挡输入框等一系列问题；


1. 单页面 软键盘弹起挤压页面

如上图所示：当页面中的input获取到焦点，软键盘弹出的时候，绝对定位在页面底部的按钮会被向上挤压；

原因：造成这种现象的原因是，当软键盘弹出的时候，webview窗口被挤压，高度变小了，所以这个时候，绝对定位的按钮就会跟随webview一起上移，给人的感觉就是按钮被顶上去了；

解决办法：在安卓手机上，当页面被挤压的时候，页面大小发生了改变，会触发onresize事件，在页面出口变小的时候，手动去设置webview的高度大小，就能解决问题；

//获取原始窗口的高度
var originalHeight=document.documentElement.clientHeight || document.body.clientHeight;

window.onresize=function(){

    //软键盘弹起与隐藏  都会引起窗口的高度发生变化
    var  resizeHeight=document.documentElement.clientHeight || document.body.clientHeight;

    if(resizeHeight*11){ //resizeHeight.webview.currentWebview().setStyle({
                height:originalHeight
            });

      }
}

单页面软键盘弹起挤压页面的问题 Demo下载

2. 底部导航栏被挤压上去的问题


如图所示，当子页面中的input获取焦点的时候，父页面的底部导航栏被弹起；

原因：当子页面中存在input获取焦点，窗口的底部会弹出软键盘，软键盘弹出的时候，会挤压父页面，子页面绝对定位在窗口底部的导航栏就会被挤压，给人的感觉就是底部导航被顶起；

解决办法：根单页面的按钮被弹起的解决办法类似，不过在这里需要监听的是父页面的高度，当软键盘弹起父页面被挤压时候，子页面也被挤压，所以在手动修改父页面的高度的时候，也需要手动修改子页面的高度；

var height = document.documentElement.clientHeight || document.body.clientHeight;
window.onresize = function() {
    var heightView = document.documentElement.clientHeight || document.body.clientHeight;
    if(heightView < height) {
        plus.webview.currentWebview().setStyle({
            height: height
        });
        //修改父页面高度的时候，也要修改子页面的高度  因为子页面距离父页面底部始终是51px  所以这里只需要用父页面的高度减去51px,就是子页面的高度
        plus.webview.getWebviewById('HTML/a.html').setStyle({height: (height*1-51)});
    }
}

弹出软键盘，底部导航栏被挤压 Demo下载

软键盘弹挤压窗口的情况只会在安卓上出现，因为IOS上的软键盘是直接覆盖窗口的最上层，不会挤压窗口；