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 ...
随机推荐
- python-Web-django-ajax分页
views: from django.shortcuts import HttpResponse,redirect,render from app01.models import * import j ...
- Leetcode之广度优先搜索(BFS)专题-994. 腐烂的橘子(Rotting Oranges)
Leetcode之广度优先搜索(BFS)专题-994. 腐烂的橘子(Rotting Oranges) BFS入门详解:Leetcode之广度优先搜索(BFS)专题-429. N叉树的层序遍历(N-ar ...
- Linux Shell输出颜色字符学习笔记(附Python脚本实现自动化定制生成)
齿轮发出咔嚓一声,向前进了一格.而一旦向前迈进,齿轮就不能倒退了.这就是世界的规则. 0x01背景 造了个轮子:御剑师傅的ipintervalmerge的Python版本.觉得打印的提示信息如果是普通 ...
- shell - python 函数式编程 -- 经典例子 + 让数据自增 + while + > /dev/null 2>&1 & crontab
1.shell #!/bin/bash anynowtime="date +'%Y-%m-%d %H:%M:%S'" NOW="echo [\`$anynowtime\` ...
- JavaSE编码试题强化练习1
1. 编写应用程序,创建类的对象,分别设置圆的半径.圆柱体的高,计算并分别显示圆半径.圆面积.圆周长,圆柱体的体积. /** * 定义父类--圆类 */ public class Circle { / ...
- Rsyslog收集应用日志
收集系统其它服务日志,在客户端node1 上操作,示例以openstack-nova 服务的日志为例: 1.先修改配置文件 /etc/rsyslog.conf,完整内容如下: [root@node1 ...
- PostgreSQL unlogged表
PostgreSQL有一种介于正常表和临时表之间的类型表,称之为unlogged表,在该表新建的索引也属于unlogged,该表在写入数据时候并不将数据写入到持久的write-ahead log文件中 ...
- Spark中分布式使用HanLP(1.7.0)分词示例
HanLP分词,如README中所说,如果没有特殊需求,可以通过maven配置,如果要添加自定义词典,需要下载“依赖jar包和用户字典". 分享某大神的示例经验: 是直接"java ...
- .Net Core使用AutoMapper做对象关系映射
我想很多后端开发者,纠结于如何在Dto及表实体中做属性关系映射,因为真的太繁琐了., ⒈如何使用? Mapper.Initialize(cfg => cfg.CreateMap<Users ...
- 解决:IDE编译报错:Dangling metacharacter
Dangling metacharacter的意思是说:摇摆不定的元字符. 翻译成编程意思就是:当前字符计算有其它意思,并不能确定你到底用于什么意思.类似于中文的多义词. 如下图所示,当我们要分割字符 ...