Explain：解决MUI 软键盘弹起挤压页面问题

问题：在使用mui和H5+进行移动端开发的时候，经常会遇见需要用户输入的情况

当input获取焦点弹起软键盘的时候，经常会遇见软键盘挤压页面、软键盘遮挡输入框等一系列问题； 

 

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

 

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

 

//获取原始窗口的高度

var originalHeight=document.documentElement.clientHeight || document.body.clientHeight;

window.οnresize=function(){

　　 //软键盘弹起与隐藏 都会引起窗口的高度发生变化

　　var resizeHeight=document.documentElement.clientHeight || document.body.clientHeight;

　　if(resizeHeight*1<originalHeight*1){

　　　　//resizeHeight<originalHeight证明窗口被挤压了

　　　　plus.webview.currentWebview().setStyle({ height:originalHeight });

　　 }

}

转载于:https://www.cnblogs.com/chung2017/p/9675114.html