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 ...
随机推荐
- Office之什么是高内聚低耦合
---恢复内容开始--- 高内聚低耦合,是软件工程中的概念,是判断设计好坏的标准,主要是面向对象的设计,主要是看类的内聚性是否高,耦合度是否低. 粗劣的说就指的是:单独模块间有着强大的凝聚力,不同的模 ...
- python pandas dataframe 读取和写入Oracle
1.代码:主要写入时表要为小写,否则报错 Could not reflect: requested table(s) not available in Engine from sqlalchemy i ...
- Nexus2 yum插件RCE漏洞(CVE-2019-5475)
1.漏洞简介: 安全研究员Christian August Holm Hansen在Nexus Repository Manager 2.X中披露了一个远程命令执行漏洞. 该漏洞默认具有部署权限帐户. ...
- max-http-header-size 引发的一起血案(附:查gc方法)
最近在做项目的时候发现其中一个服务出现了性能上的问题,项目启动后,出现内存溢出异常. 查看堆内存使用情况 分析然后找到占用空间的类,当时是byte[]占用99%的空间,然后点开查看实例发现是http占 ...
- Python学习【day03】- Python基础练习题(列表、元组、字典)
#!/usr/bin/env python # -*- coding:utf8 -*- # 1.有两个列表 # l1 = [11,22,33] # l2 = [22,33,44] # a.获取内容相同 ...
- 洛谷 P3370 【模板】字符串哈希 (set||map||哈希||字典树(mle)
P3370 [模板]字符串哈希 题目描述 如题,给定N个字符串(第i个字符串长度为Mi,字符串内包含数字.大小写字母,大小写敏感),请求出N个字符串中共有多少个不同的字符串. #友情提醒:如果真的想好 ...
- 2019年8月23日 星期五(韩天峰的swoole)
Swoole:面向生产环境的 PHP 异步网络通信引擎 使 PHP 开发人员可以编写高性能的异步并发 TCP.UDP.Unix Socket.HTTP,WebSocket 服务. Swoole 可以广 ...
- python并发编程-进程理论-进程方法-守护进程-互斥锁-01
操作系统发展史(主要的几个阶段) 初始系统 1946年第一台计算机诞生,采用手工操作的方式(用穿孔卡片操作) 同一个房间同一时刻只能运行一个程序,效率极低(操作一两个小时,CPU一两秒可能就运算完了) ...
- 移动端实1px细线方法
前言 在移动端中,宽度100%,1px的线看起来要比pc端中宽度100%,1px的线粗, 那是因为css中的1px并不等于移动设备(物理像素)的1px.物理像素显示是1个像素代表2个像素,所以出现为2 ...
- python 定义变量
定义变量 什么是变量? 在程序运行过程中,其值可以改变的量 标识符(命令规范) 只能由数字.字母.下划线组成 不能以数字开头 不能是系统关键字 # 导入包import keyword# 打印所有关键 ...