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 ...
随机推荐
- flask 框架快速入门
flask 框架快速入门 搭建一个简易flask项目 首先使用 Pycharm创建flask项目 运行flask项目 1.使用Pycharm搭建flask项目 (如果Pycharm新建项目中未出现该图 ...
- 机器学习实战笔记——KNN约会网站
''' 机器学习实战——KNN约会网站优化 ''' import operator import numpy as np from numpy import * from matplotlib.fon ...
- Ubuntu 16.04安装anaconda3
首先下载anaconda3镜像,清华大学开源软件镜像站下载地址:https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/ 因为实验需要用到tenso ...
- staticmethod自己定制
class StaticMethod: def __init__(self,func): self.func=func def __get__(self, instance, owner): #类来调 ...
- 测试工具/PostMan
1.postman测试上传文件
- PopupWindow 点击外部区域无法关闭的问题
在android4.0/5.0系统上,使用popupWindow时,点击内容外部区域无法关闭,但是在6.0及以上机子上又是正常的. 加下面这句代码: mPopupWindow.setBackgroun ...
- 图解DMZ
图解DMZ 1. 概念介绍 DMZ是英文“demilitarized zone”的缩写,中文译为“隔离区”.“非军事区”.它是为了解决安装防火墙后外部网络不能访问内部网络服务器的问题,而设立的一个非安 ...
- selenium—显示等待中期望的场景语句
① alert_is_present() 判断页面是否出现alert框 wait = WebDriverWait(driver,10) alert = wait.until(EC.alert_is_p ...
- Elasticsearch-字符串类型
ES-用于定义文档字段的核心类型 ES中一个字段可以是核心类型之一,如字符串.数值.日期.布尔型,也可以是一个从核心类型派生的复杂类型,如数组. 字符串类型 索引一类型为字符串的数据doc1: Fen ...
- Django发送邮件和itsdangerous模块的配合使用
项目需求:用户注册页面注册之后,系统会发送一封邮件到用户邮箱,用户点击链接以激活账户,其中链接中的用户信息需要加密处理一下 其中激活自己邮箱的smtp服务的操作就不在加以说明,菜鸟教程上有非常清晰的讲 ...