【原创】修复ios输入框获取焦点时不支持fixed的bug

前些日子，做了一个手机站的项目，有一个页面是这样的，

 

有一个固定（position:fixed）的头部和底部导航，中间是一些表单内容，没啥特别的。但是到了ios中，正常滚动页面没有问题，一旦触发了文本框，出现输入法小键盘时，就会变成了这样：

就是，头部和底部的位置错乱了，不再fixed了。网上搜索了一翻，原来在ios的safari和webview中，对position:fixed的支持不是很好，在ios5之前甚至还不支持position:fixed。其解决办法也有，一种是把中间部分也加上fixed，并加上overflow:scroll，测试后，不管用。

还有就是把头部和底部写成absolute，然后用js模拟fixed，免不了要获取滚动的高度等一些麻烦语句，而且还是有bug，滚动时会跳动。

最后，只能采用一种不太理想的解决方法，算是某种意义上的忽略这个问题吧。就是当输入框获取焦点时，另头部底部为relative，当输入完成，失去焦点时，再重新变回fixed。其实，用户在填写文本框时，不大会注意其他信息，只会专心的操作输入法小键盘，所以，这时头和尾是不是固定的没什么关系，输完了，页面又恢复了常态。思来想去，这是最可行，最简单的解决办法了。当然，是需要判断一下是否是ios环境的。代码如下：

<script>

$(document).ready(function(){

         //修复ios输入框获取焦点时不支持fixed的bug

         var isIOS=(/iphone|ipad/gi).test(navigator.appVersion);

         if(isIOS){

                   $('.js_wrap').on('focus','input',function(){//js_wrap是中间含有文本框的区域 

                            $('header').css("position","relative");

                            $('footer').css("position","relative");                                 

                   }).on('focusout','input',function(){

                            $('header').css("position","fixed");

                            $('footer').css("position","fixed");                    

         });

         }                

});

</script>