手机端经典键盘事件

 <style type="text/css">
			body,
			div,
			p,
			img,
			span ,li,ul{
			  margin: 0;
			  padding: 0;
			  font-family: "微软雅黑";
			}
			img {
			  border: none;
			}
			ul,
			li {
			  list-style: none;
			}
			.xlhn_content {
			  960px;
			  height: 1000px;
			  margin: 0 auto;
		  	  background: url("${base}/resources/image/hunan_gyact/cytx_bg_pc.png") no-repeat;
		  	  background-repeat: no-repeat;
        	  background-position: center;
              background-size: cover;
              overflow: hidden;
			}
			::-webkit-input-placeholder { /* WebKit browsers */ 
			font-size:25px;
			} 
			:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
			font-size:25px;
			} 
			::-moz-placeholder { /* Mozilla Firefox 19+ */ 
			font-size:25px;
			} 
			:-ms-input-placeholder { /* Internet Explorer 10+ */ 
			font-size:25px;
			}
			.xontent-mid{
				text-align: center;padding-top:40%;font-size: 30px;
			}
			.xontent-mid input {
				 50%;height: 5%;border-radius: 10px;outline: none;border: none;padding-left:30px ;
				font-size: 25px;;
			}
			#yidcard{
				margin-top: 30px;
			}
			.xontent-mid label{
				margin-right: 20px;
			}
			.xontent-bottm{
				margin-top: 30%;text-align: center;
			}
			.xl_joigz{
				background: url("${base}/resources/image/hunan_gyact/guanzhu.png") no-repeat;
				display: inline-block; 250px;height: 65px;
				background-position: center;background-size: contain;
			}
			.xl_joinin{
				background: url("${base}/resources/image/hunan_gyact/tj.png") no-repeat;
				display: inline-block; 250px;height: 65px;
				background-position: center;background-size: contain;
			}
			
		   @media only screen and (min-device- 240px) and (max-device- 760px) {
		    	html,body{
		    		 100%;height: 650px;
		    	}
		    	
		    	.modal{
			    		60%;margin-left:-30%;
			    	}
		    	.xlhn_content {
				 	 100%;height:100% ;
				  	background: url("${base}/resources/image/hunan_gyact/cytx-bg.png") no-repeat;
				  	background-repeat: no-repeat;
			        background-position: center;
			        background-size: cover;
			        margin: 0px;
			        padding: 0px;
				}
				#yidcard{
					margin-top:0;
				}
				.xontent-mid input{
					font-size:16px;
				}
				.xontent-mid{
					color: #fff;text-align: center;
					padding-top:65%;
					font-size:16px;
				}
				.xontent-bottm{ 
					100%;margin-top:150px;text-align: center;
				}
				.xl_joinin{
					display: inline-block;
					 150px;height:53px ;
				  	background: url("${base}/resources/image/hunan_gyact/tj.png") no-repeat;
				  	background-size: 150px 53px;
				  	
				}
				.xl_joigz{
					display: inline-block;
					 150px;height:53px ;
				  	background: url("${base}/resources/image/hunan_gyact/guanzhu.png") no-repeat;
				  	background-size: 150px 53px;
				}
				::-webkit-input-placeholder { /* WebKit browsers */ 
				font-size:16px;
				} 
				:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
				font-size:16px;
				} 
				::-moz-placeholder { /* Mozilla Firefox 19+ */ 
				font-size:16px;
				} 
				:-ms-input-placeholder { /* Internet Explorer 10+ */ 
				font-size:16px;
				}
				.xontent-mid input{border-radius: 26px;background: #fff;color: #262626;padding:10px;60%;margin-bottom:10px;}
		    }
		     @media only screen and (max-device-350px)  {
		     	html,body{
		    		height: 570px;
		    	}
		     }

　　

<div class="xlhn_content">
	<div class="xontent-mid">
		<p><input type="text" name="" id="yname" value="" placeholder="请输入您的真实姓名"/></p>
		<p><input type="text" name="" id="yidcard" value="" placeholder="请输入您的身份证号"/></p>
	</div>
		<div class="xontent-bottm">
			<a href="javascript:;"  class="xl_joinin" id="getOn"></a>
		</div>
</div>

　　

$('#yname').bind('focus',function(){
　　$('.xontent-bottm').css({'position':'static'});
　　//或者$('#viewport').height($(window).height()+'px');
}).bind('blur',function(){
　　$('.xontent-bottm').css({'position':'static'});
　　//或者$('#viewport').height('auto');
});
$('#yidcard').bind('focus',function(){
　　$('.xontent-bottm').css({'position':'static'});
　　//或者$('#viewport').height($(window).height()+'px');
}).bind('blur',function(){
　　$('.xontent-bottm').css({'position':'static'});
　　//或者$('#viewport').height('auto');
});