zoukankan      html  css  js  c++  java
  • 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%);");
    		});
    

      

     

  • 相关阅读:
    微信小程序前端开发中经常用到的一些好方法(待后续继续补充)
    js 滚动到指定位置的函数
    前端常用的插件网站
    电动车选购和防盗指南
    如何快速有效的投诉上海移动
    DSP中CMD文件
    碰到磁盘动态无效怎么办?
    创维37K05HR黑屏有声音故障维修
    Ubuntu桌面版本和服务器版本之间的区别(转载)
    能率热水器存在严重质量隐患!千万不要购买!买了之后每年都需要自费维修!
  • 原文地址:https://www.cnblogs.com/xinheng/p/10156226.html
Copyright © 2011-2022 走看看