移动端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…等。这就很容易理解了 输入框获取焦点时 让底部的定位元素处于正常的流 就不会出现反常的遮挡。​​​​