解决input获取焦点时底部菜单被顶上来问题

标签：position   题解   blog   影响   index   位置   put   虚拟键盘   单位   

当input获取焦点时底部菜单被顶上来问题解决方案：

1.如果是短页面，比如登录页，上部的登录表单div与底部的菜单div不会重合（两个div是同级的），可以通过设置登录表单div的z-index比底部菜单div的z-index大，这样在页面加载完成后，两个div不会重叠，其层级设置也不会受影响。而在input获取焦点之后，软键盘弹出，两个div发生重叠，因为设置了上部登录表单div的z-index比底部菜单div的z-index大，所以底部菜单div会被挡住，也就是看不到被顶上来的底部菜单，问题自然就迎刃而解了。

注意：z-index在position属性值为默认值static时不生效。

2.可以使用js来控制底部菜单div的position的值

说明：在input获取焦点时，改变底部菜单div的position值为static（默认值，不会脱离文档流），会被放置到document的最后，不会出现在软键盘上面，而当input失去焦点时，再把底部菜单div的position改回fixed，底部菜单div再次回到视口底部，这样问题就解决了。

但是，若软键盘是点击收起键收起的，input不会失去焦点，所以blur事件不会触发，底部菜单div的position也不会改回fixed，于是，我们可以通过捕捉键盘收起事件去改变底部菜单div的position。

方法如下：

 var wHeight = window.innerHeight; //获取初始可视窗口高度 
 window.addEventListener(‘resize‘, function(){ //监测窗口大小的变化事件 
     var hh = window.innerHeight; //当前可视窗口高度 
     var viewTop = $(window).scrollTop(); //可视窗口高度顶部距离网页顶部的距离 
     if(wHeight > hh){ //可以作为虚拟键盘弹出事件 
        //$(".content").animate({scrollTop:viewTop+100}); //调整可视页面的位置 
        //do something... 
        $(‘.bar-tab‘).css(‘position‘,‘static‘);
      }else{ //可以作为虚拟键盘关闭事件 
        //$("content").animate({scrollTop:viewTop-100}); 
        //$(‘#mini_nav‘).css({‘position‘:‘fixed‘,‘bottom‘:‘0‘});//软键盘关闭时改变底部菜单div的position
        $(‘.bar-tab‘).css(‘position‘,‘fixed‘);
       } 
    wHeight = hh; 
 });

3.第三种方法，同样是需要获取可视窗口高度。

　因为最开始我们底部的菜单定位时的样式写的是"bottom:xxpx"，因此，当弹出软键盘，可视窗口变小时，必然菜单的位置会随之被顶上来。由此可想到的一种解决方法是：

　将"bottom:xxpx"，改为"top:xxpx"。至于top的数值，就是js获取初始可视窗口高度，减去本身的height（在底部的时候），或者在进行调整。

   这样做的原因就是，无论有没有软键盘弹出，无论可视窗口高度是否改变，top顶部的位置始终不变，因此能确保菜单位置不变。

解决input获取焦点时底部菜单被顶上来问题

标签：position   题解   blog   影响   index   位置   put   虚拟键盘   单位   

原文地址：http://www.cnblogs.com/benbendu/p/7016582.html