您的位置:首页 > 移动开发

移动端 关于 键盘将input 框 顶上去的解决思路

2017-08-08 10:23 239 查看
不管是上面的textarea还是下面的input输入框,它们任意一个获得焦点的时候,手机的虚拟键盘都会抬起将fixed定位于屏幕最低端的 “提交”按钮顶到屏幕 “中间”位置,严重影响布局,这就测试人员来看是一个不可饶恕,已经足已被开除的底部,怎么解决这个问题呢?对于布局不是很复杂的 "提交"页面而言,可以采用动态获取底部footer的offset().top 再减去其父元素offset().top ,将其差值当作footer的的margin-top数值的,同时remove掉footer的fixed属性。

      具体的解决步骤如下:
   将footer 外面包裹一个父级div,赋给其类名 footer-wrap,footer fixed绝对定位与屏幕的底部
 分别获取footer和footer-wrap的offset().top,计算差值,remove掉footer的fixed属性,然后赋值给footer的margin-top

     键盘抬起后,页面如下:

         


 
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: