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

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

代码如下所示：

<div class="search-box">

主页

&DQclAXUlt;/a>

商城

服务

我的

当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.如果是长页面，比如商品展示页，上部的商品展示div肯定会与底部菜单div发生重叠，那么设置层级（z-index）肯定是行不通的，于是，可以使用js来控制底部菜单div的position的值来解决：

$('.search-input').bind('focus',function(){

$('#mini_nav').css('position','static');

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

$('#mini_nav').css({'position':'fixed','bottom':'0'});

});

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

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

那么如何捕捉到软键盘收起事件呢？在网上搜索了很久，终于找到了一个解决方案：根据视口的大小变化判断。

js代码如下：

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...

}else{ //可以作为虚拟键盘关闭事件

//$("content").animate({scrollTop:viewTop-100});

$('#mini_nav').css({'position':'fixed','bottom':'0'});//软键盘关闭时改变底部菜单div的position

}

wHeight = hh;

});

OK，完成。

其实在用户滚动页面时会使input失去焦点触发blur事件，如果要求不是特别严格，这个小问题可以忽略。

以上所述是给大家介绍的input获取焦点时底部菜单被顶上来问题的解决办法，希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。