input获取焦点时底部菜单被顶上来问题的解决办法
代码如下所示:
<div class="search-box"> <input class="search-input" type="text" placeholder="请输入名称"> </div> <!--底部--> <div id="mini_nav" class="nav bt-nav"> <div> <ul> <li><a href="#"><span class="ico-home"></span> 主页 </a> </li> <li><a class="selected-menu" href="#"><span class="ico-shop"></span> 商城 </a> </li> <li><a href="#"><span class="ico-service"></span> 服务 </a> </li> <li><a href="#"><span class="ico-me"></span> 我的 </a> </li> </ul> </div> </div>
当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失去焦点时,再把底部菜单div的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获取焦点时底部菜单被顶上来问题的解决办法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
- 解决input获取焦点时底部菜单被顶上来问题
- 替换PopUpWindow(解决焦点获取问题)实现顶部筛选菜单(顶部不变,底部阴暗)
- 如何利用PopupWindow实现弹出菜单并解决焦点获取以及与软键盘冲突问题
- 如何利用PopupWindow实现弹出菜单并解决焦点获取以及与软键盘冲突问题-FenGKun
- 如何利用PopupWindow实现弹出菜单并解决焦点获取以及与软键盘冲突问题
- android 编辑框获取软键盘后 将底部控件顶上来解决办法
- 火狐下input焦点无法重复获取问题的解决方法
- IE点击子div,父div不获取焦点问题的解决办法(一)
- 移动端开发,IOS、iPhone,表单input元素获取焦点时页面被放大的解决办法。
- 移动端解决fixed和input获取焦点软键盘弹出影响定位的问题
- 如何利用PopupWindow实现弹出菜单并解决焦点获取以及与软键盘冲突问题
- vue获取input输入值的问题解决办法
- 如何利用PopupWindow实现弹出菜单并解决焦点获取以及与软键盘冲突问题
- IE点击子div,父div不获取焦点问题的解决办法(二)
- 移动端开发,IOS、iPhone,表单input元素获取焦点时页面被放大的解决办法。
- 移动端解决fixed和input获取焦点软键盘弹出影响定位的问题
- 火狐下input焦点无法重复获取问题的解决方法
- 移动端解决fixed和input获取焦点软键盘弹出影响定位的问题
- android:windowSoftInputMode属性详解之解决搜索框获得焦点的时软键盘就会弹出把我底部的tab导航挤出问题
- Android开发之ListView+EditText-要命的焦点和软键盘问题解决办法