移动端input获取焦点弹出输入板从而影响position定位的问题

60 阅读 0 评论 40 点赞

我是靠谱客的博主多情飞机，最近开发中收集的这篇文章主要介绍移动端input获取焦点弹出输入板从而影响position定位的问题，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

移动端里面常常会遇到需要填值得输入框这个输入框获取焦点之后，从而弹出输入板打字输入。这时候弹出的输入板会影响到页面的底部布局（底部用position定位）。我亲测了一个小简便方法来消除这种影响。

$('.login-cont-ipt').bind('focus',function(){

    $('.login-footer').css('position','static');

   //或者$('#viewport').height($(window).height()+'px');

}).bind('blur',function(){

    $('.login-footer').css({'position':'fixed','bottom':'0'});

    //或者$('#viewport').height('auto');

});

原理就是 position的static static是默认值，让元素处于正常的流中且忽略 top…left…等。这就很容易理解了输入框获取焦点时让底部的定位元素处于正常的流就不会出现反常的遮挡。