html 移动端输入框点击会压缩,完美解决移动端软键盘顶起输入框。。。

在移动端开发中会遇见各种适配的问题，特别是iOS与安卓之间的差异。。。

首先，我这边问题的场景是，在点击按钮时弹出表单列表，这个表单列表是position: fixed定位的，初始bottom为0；

当输入框得焦时弹出软键盘，这时软键盘会把表单列表顶上去的(这些表单列表是很复杂的内容，里面有很多不确定的时间选择器，地址选择器，多选框，单选框.....都是后台自定义的表单)

思考问题：因为表单列表是fixed定位的，会被顶上去很正常；由于是fixed定位，bottom的值可以为负(解决问题主要东西)；这样的话我就可以当输入框focus时，就获取当前输入框的offsetTop值，再获取弹出层的height，设置弹出层bottom=offsetTop-height；(heiight为弹出层高度，这个值必定是负值)

代码如下：

但最后测试时：

1.安卓软键盘上有收起按钮，当软键盘收起时此时输入框并没有失去焦点，所以触发不了失焦事件；

2.每次弹出软键盘时页面上只有一个可以点击得输入框，体验度不好；

修改后得代码如下

之后得效果：完美解决