关于移动端页面弹出框被软键盘遮挡的问题

在移动端页面的开发中，当弹出框内有输入框需要用户输入时，往往会面临这样的一个问题：弹出的软键盘会将输入框遮挡住，不方便用户看到自己输入的内容。如下图输入地址一栏：

移动端中，当软键盘弹出时，会触发一个页面的resize事件，意思就是说，html的高度会发生改变，变成原来的高度和软键盘的高度相差值。由下图也可以看出，弹出框因内容自适应变得差不多要占完一整屏，而当软键盘弹出时，高度值resize后的弹出框的高度显然大于页面的新高度。

大部分弹出框一般使用的是fixed或者absolute定位，结构已脱离文档流，所以即使弹出框的高度大于页面的高度，弹出框超出页面部分也只能被隐藏，即所谓的被软键盘覆盖。

在这样的情况下改如何解决？一来，除了让美工在设计弹框的时候高度不要超过屏幕的一半以外，题主想到了一个思路：

首先背景嵌套内层弹框，背景使用fixed定位top、right、bottom及left都设置为0，让其占据一整个屏幕，其次内层弹出框的div使用absolute定位，top值50%后使用translate往上移动50%保证弹出框垂直居中，而left和right根据设计图设置成一个相同的值，宽高不设定，高度设置一个最大值如最高80%，并将y轴的overflow设置为自动。样式及结构如下。

CSS：

.floatbox{position:fixed;  top:0;  right:0;  bottom:0;  left:0;  background:rgba(0,0,0,0.5);}

.floatbox>div{position:absolute;  top:50%;  left:15px;  right:15px;  transform:  translate(0,-50%);  -webkit-transform:  translate(0,-50%);  max-height:80%;  overflow-y:auto;  background:#fff;  border-radius:5px;}

HTML：

 

效果图：

这个方法也有缺陷，当键盘弹出时还是会遮挡住输入框，输入内容时，输入框才会被“提拉”到可见的视区。DEMO可参阅一下二维码，有更好的思路也欢迎跟题主交流。

前端企鹅交流群：125493681