手机软键盘谈起挤压页面问题

解决问题的根本思路是: 

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;
	})

 

  

posted on 2017-11-22 14:41  木之子梦之蝶  阅读(861)  评论(0编辑  收藏  举报

导航