解决问题的根本思路是:
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;
})