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;
width: 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;*/
width: 5.8rem;
max-height: 80%;
overflow: hidden;
/*transform: translate(0,-50%);*/
/*-webkit-transform: translate(0,-50%);*/
overflow-y:auto;
/*background: #fff;*/
}
.pwhTop{
width: 100%;
height: 2.17rem;
}
.pwhTop img{
display: block;
width: 100%;
}
.pwhMid{
width: 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{
width: 100%;
height: 0.8rem;
margin-bottom: 0.3rem;
}
.PwhInp input{
width: 100%;
height: 0.8rem;
background: #eaeaea;
border:none;
font-size: 0.28rem;
color: #333;
}
.pwhSure{
width: 100%;
margin-top: 0.5rem;
height: 0.8rem;
line-height: 0.8rem;
text-align: center;
font-size: 0.32rem;
color: #fefefe;
background: #d2965f;
}
.pwhClose{
width: 0.67rem;
height: 0.67rem;
margin: 0 auto;
margin-top: 0.35rem;
}
.pwhClose img{
display: block;
width: 100%;
}
//解决弹出键盘页面高度变化bug
$("input").focus(function(){
$("input").css("transform","translate(0,-50%);");
$("input").css("-webkit-transform","translate(0,-50%);");
});
fixed固定时弹窗上的input被软键盘遮住的问题的更多相关文章
- input获取焦点软键盘弹出影响定位
解决移动端底部fixed和input获取焦点软键盘弹出影响定位的问题$(document).ready(function() { var ...
- js-移动端android浏览器中input框被软键盘遮住的问题解决方案
我遇到的问题:在一个页面里有一个弹出层之前我给我的最外层加了固定定位 用了下面的方法也不好使:没有办法我将之改为绝对定位层级变高在加上一个顶部标签通过js计算顶部高度来实现满屏遮挡: <sect ...
- AppCompatActivity 去掉标题栏和EditText弹出软键盘遮住输入框问题
1. AppCompatActivity去掉标题栏 此处除掉标题栏,需要注意一点,AppCompactActivity是继承自Activity.然而,AppCompactActivity据查看网上资料 ...
- IOS下 input 被软键盘方案遮盖问题解决
前言: 并没有完美解决 ! 场景: 最近在做企业微信H5的一个项目,里面有个动态列表页,开始输入框是隐藏的,点击评论才会出现并让 input 聚焦.经过测试在安卓上面应该没什么问题,但是iOS上面会出 ...
- 页面的input唤醒软键盘再收起后,页面会出现软键盘高度的空白背景
微信浏览器在版本6.7.4及以上会有这个bug:页面的input唤醒软键盘再收起后,页面会出现软键盘高度的空白背景,触摸到滚动条会消失恢复! 解决代码 后台框架嵌入iframe的情景,iframe内部 ...
- 系统软键盘">Android在外接物理键盘时,如何强制调用系统软键盘?
第一次写,写的不好请见谅 物理键盘映射过程: 手机/system/usr/keylayout/*.kl :内核将keyCode映射成有含义的字符串KeycodeLabels.h : framework ...
- 移动端解决fixed和input获取焦点软键盘弹出影响定位的问题
场景描述, 当document的高度不够window的高度时候,如在ip6中文档的高度比窗体的高度小,到底设计在最下方的区域没有在窗体最下方,就留有空白地方如下图的灰色部分 1. 解决初始化文档高度, ...
- 手机端上点击input框软键盘出现时把input框不被覆盖,显示在屏幕中间(转)
转载地址:https://www.cnblogs.com/xzzzys/p/7526761.html 1 用定位为题来解决var oHeight = $(document).height(); // ...
- ios下input focus弹出软键盘造成fixed元素位置移位
正常状态下 input focus软键盘弹出时 问题描述: 头部结构fixed,滚动到下部内容区域,input.textarea等focus弹出软键盘时,头部位置偏移被居中(该问题ios7 beta3 ...
随机推荐
- ArcEngine二次开发之提取外包矩
1.通过ITopologicalOperator接口,此方法适用于需要获得包含几个或多个要素的最小外包矩形 public IEnvelope GetEnvelope(IGeometryCollecti ...
- 【AMAD】Pysnooper -- 别再用print进行debug了
简介 动机 作用 用法 热度分析 源码分析 个人评分 简介 pysnooper是低配版debugger,别再用print进行debug了. 动机 想象一个场景,你的Python代码运行后不产生你要的效 ...
- 华为HCNA乱学Round 7:VLAN间路由
- the property “***” on could not be set to a null value
在建立EF框架的时候,创建实体时由于部分数据库类型和.net类型不同,比如int类型,在数据库中是可空类型,而.net中是不允许的,所以创建实体的时候,数据库的int类型对应的实体类型应该为int?类 ...
- 【转贴】优秀的龙芯Docker虚拟机解决方案
优秀的龙芯Docker虚拟机解决方案 http://www.loongson.cn/m/view.php?aid=836 时间:2019-05-23 15:03 来源:未知 作者:龙芯中科 ...
- Java代码执行顺序及多态体现
/** * Description: * 基类的引用变量可以只想基类的实例对象也可指向其子类的事来对象 * 接口的引用变量也可以指向实现类的实例对象 * 程序调用的方法在运行期才动态绑定 * 绑定指将 ...
- MyBatis动态SQL第一篇之实现多条件查询(if、where、trim标签)
一.动态SQL概述 以前在使用JDBC操作数据时,如果查询条件特别多,将条件串联成SQL字符串是一件痛苦的事情.通常的解决方法是写很多的if-else条件语句对字符串进行拼接,并确保不能忘了空格或在字 ...
- 2-SAT问题介绍求解 + 模板题P4782
(点击此处查看原题) 什么是2-SAT问题 sat 即 Satisfiability,意思为可满足,那么2-SAT表示一些布尔变量只能取true或者false,而某两个变量之间的值存在一定的关系(如: ...
- POJ - 1815 Friendship (最小点割集)
(点击此处查看原题) 题目分析 题意:有n个人,编号记为1~n,n个人之间可能有人可以互相联系,如果A能和B联系,那么至少满足这两种情况之一:(1)A知道B的电话(2)A可以和C联系,并且C可以和B联 ...
- pytorch中torch.narrow()函数
torch.narrow(input, dim, start, length) → Tensor Returns a new tensor that is a narrowed version of ...