fixed固定时弹窗上的input被软键盘遮住的问题

<div class="pwhCover">
			<div class="pwhCon">
				<div class="pwhTop">
					<img src="img/pwh.png" alt="" />
				</div>
				<div class="pwhMid">
					<div class="PwhInp">
						<input type="text"  placeholder="姓名" id='name'/>
					</div>
					<div class="PwhInp">
						<input type="text" placeholder="电话" id="phone"/>
					</div>
					<div class="PwhInp">
						<input type="text" value="" placeholder="详细地址" id="address"/>
					</div>
					<!--确定-->
					<div class="pwhSure">确定</div>
				</div>
				<!--关闭-->
				<div class="pwhClose">
					<img src="img/pwhClose.png" alt="" />
				</div>
			</div>
		</div>

  

.pwhCover{
	position: fixed;
	left: 0;
	top: 0;
	 100%;
	height: 100%;
	background: rgba(0,0,0,0.6);
	z-index: 9999999;
	display: none;
}
.pwhCon{
	position: absolute;
	left: 0;
	right: 0;
	margin: 2rem auto 0;
	/*top:2rem;*/
	 5.8rem;
	max-height: 80%;
	overflow: hidden;
	/*transform: translate(0,-50%);*/ 
	/*-webkit-transform: translate(0,-50%);*/
	 overflow-y:auto;
	/*background: #fff;*/
	
}
.pwhTop{
	 100%;
	height: 2.17rem;
}
.pwhTop img{
	display: block;
	 100%;
}
.pwhMid{
	 100%;
	overflow: hidden;
	box-sizing: border-box;
	background: #fff;
	box-sizing: border-box;
	padding:20px 35px 25px;
	border-bottom-left-radius:0.1rem;
	border-bottom-right-radius: 0.1rem;
}
.PwhInp{
	 100%;
	height: 0.8rem;
	margin-bottom: 0.3rem;
}
.PwhInp input{
	 100%;
	height: 0.8rem;
	background: #eaeaea;
	border:none;
	font-size: 0.28rem;
	color: #333;
}
.pwhSure{
	 100%;
	margin-top: 0.5rem;
	height: 0.8rem;
	line-height: 0.8rem;	
	text-align: center;
	font-size: 0.32rem;
	color: #fefefe;
	background: #d2965f;
}
.pwhClose{
	 0.67rem;
	height: 0.67rem;
	margin: 0 auto;
	margin-top: 0.35rem;
}
.pwhClose img{
	display: block;
	 100%;
}

 

//解决弹出键盘页面高度变化bug
$("input").focus(function(){
		  $("input").css("transform","translate(0,-50%);");
		   $("input").css("-webkit-transform","translate(0,-50%);");
		});

  

 

原文地址:https://www.cnblogs.com/xinheng/p/10156226.html