手机端软键盘弹出挤压页面的问题
解决这个问题的基本思路是:
1、怎样监听软键盘弹起这个事件
2、监听到这个事件后怎样操作才能让页面不被挤压
一、解决在手机页面App中手机软键盘弹出软键盘挤压页面问题
var originalHeight=document.documentElement.clientHeight || document.body.clientHeight; window.onresize=function(){ var resizeHeight=document.documentElement.clientHeight || document.body.clientHeight; //软键盘弹起与隐藏 都会引起窗口的高度发生变化 if(resizeHeight*1<originalHeight*1&&isfocus==true){ //resizeHeight<originalHeight证明窗口被挤压了 plus.webview.currentWebview().setStyle({ height:originalHeight }); } }
plus.webview.currentWebview().setStyle({ softinputMode: "adjustResize" // 弹出软键盘时自动改变webview的高度 });
二、解决在浏览器中打开网页软键盘挤压页面问题
//获取原始窗口的高度 var isfocus=false; var originalHeight=document.documentElement.clientHeight || document.body.clientHeight; window.onresize=function(){ var resizeHeight=document.documentElement.clientHeight || document.body.clientHeight; //软键盘弹起与隐藏 都会引起窗口的高度发生变化 if(resizeHeight*1<originalHeight*1&&isfocus==true){ //resizeHeight<originalHeight证明窗口被挤压了 $('.hideBtn').css('display','none'); }else{ $('.hideBtn').css('display','block'); } } $("input").focus(function(){ isfocus=true; }); $("input").blur(function(){ isfocus=false; })