解决input获取焦点时底部菜单被顶上来问题
2018-06-24 00:55:24来源:未知 阅读 ()
1 <div class="search-box"> 2 3 <input class="search-input" type="text" placeholder="请输入名称"> 4 </div> 5 <!--底部--> 6 <div id="mini_nav" class="nav bt-nav"> 7 <div> 8 <ul> 9 <li><a href="#"><span class="ico-home"></span> 10 主页 11 </a> 12 </li> 13 <li><a class="selected-menu" href="#"><span class="ico-shop"></span> 14 商城 15 </a> 16 </li> 17 <li><a href="#"><span class="ico-service"></span> 18 服务 19 </a> 20 </li> 21 <li><a href="#"><span class="ico-me"></span> 22 我的 23 </a> 24 </li> 25 </ul> 26 </div> 27 </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的值来解决:
1 $('.search-input').bind('focus',function(){ 2 $('#mini_nav').css('position','static'); 3 }).bind('blur',function(){ 4 $('#mini_nav').css({'position':'fixed','bottom':'0'}); 5 });
说明:在input获取焦点时,改变底部菜单div的position值为static(默认值,不会脱离文档流),会被放置到document的最后,不会出现在软键盘上面,而当input失去焦点时,再把底部菜单div的position改回fixed,底部菜单div再次回到视口底部,这样问题就解决了。
到这里,我们又有一个疑问了,若软键盘是点击收起键收起的,input不会失去焦点,所以blur事件不会触发,底部菜单div的position也不会改回fixed,于是,我们可以通过捕捉键盘收起事件去改变底部菜单div的position。
那么如何捕捉到软键盘收起事件呢?在网上搜索了很久,终于找到了一个解决方案:根据视口的大小变化判断。
js代码如下:
1 var wHeight = window.innerHeight; //获取初始可视窗口高度 2 window.addEventListener('resize', function(){ //监测窗口大小的变化事件 3 var hh = window.innerHeight; //当前可视窗口高度 4 var viewTop = $(window).scrollTop(); //可视窗口高度顶部距离网页顶部的距离 5 if(wHeight > hh){ //可以作为虚拟键盘弹出事件 6 $(".content").animate({scrollTop:viewTop+100}); //调整可视页面的位置 7 //do something... 8 }else{ //可以作为虚拟键盘关闭事件 9 //$("content").animate({scrollTop:viewTop-100}); 10 $('#mini_nav').css({'position':'fixed','bottom':'0'});//软键盘关闭时改变底部菜单div的position 11 } 12 wHeight = hh; 13 });
OK,完成。
其实在用户滚动页面时会使input失去焦点触发blur事件,如果要求不是特别严格,这个小问题可以忽略。
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:css实现页面居中的一种方法
下一篇:特殊字符html,css转义大全
- 循序渐进VUE+Element 前端应用开发(4)--- 获取后端数据及产 2020-05-29
- 解决微信小程序引用echarts视图模糊的问题 2020-04-24
- 解决 vs code 打开文件总是只有一个tab标签页,新打开的tab 2020-04-23
- 4.CSS中float导致的高度坍塌问题及解决方法 2020-04-09
- 常见form表单5种input输入类型 2020-03-29
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash