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


Posted in Javascript onJanuary 24, 2017

代码如下所示:

<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获取焦点时底部菜单被顶上来问题的解决办法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
Sep 12 Javascript
jQuery跨域问题解决方案
Aug 03 Javascript
XML文件转化成NSData对象的方法
Aug 12 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
Nov 17 Javascript
jQuery mobile 移动web(4)
Dec 20 Javascript
JS继承之借用构造函数继承和组合继承
Sep 07 Javascript
bootstrap导航条实现代码
Dec 28 Javascript
Angular 4.x 路由快速入门学习
May 03 Javascript
JavaScript面向对象精要(下部)
Sep 12 Javascript
深入理解JavaScript和TypeScript中的class
Apr 22 Javascript
ES6基础之字符串和函数的拓展详解
Aug 22 Javascript
Vue的click事件防抖和节流处理详解
Nov 13 Javascript
JavaScript解析JSON格式数据的方法示例
Jan 24 #Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
Jan 24 #Javascript
Jquery树插件zTree实现菜单树
Jan 24 #Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
Jan 24 #Javascript
树结构之JavaScript
Jan 24 #Javascript
AngularJS实现使用路由切换视图的方法
Jan 24 #Javascript
javascript 正则表达式去空行方法
Jan 24 #Javascript
You might like
Codeigniter实现处理用户登录验证后的URL跳转
2014/06/12 PHP
PHP配置ZendOpcache插件加速
2019/02/14 PHP
js中的值类型和引用类型小结 文字说明与实例
2010/12/12 Javascript
6款新颖的jQuery和CSS3进度条插件推荐
2013/03/05 Javascript
使用jQuery validate 验证注册表单实例演示
2013/03/25 Javascript
jQuery select表单提交省市区城市三级联动核心代码
2014/06/09 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
2014/06/16 Javascript
JavaScript模拟实现键盘打字效果
2015/06/29 Javascript
Java  Spring 事务回滚详解
2016/10/17 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
2016/10/26 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
2017/01/19 Javascript
利用JS实现scroll自定义滚动效果详解
2017/10/17 Javascript
vue中mint-ui的使用方法
2018/04/04 Javascript
[02:39]DOTA2英雄基础教程 极限穿梭编织者
2013/12/05 DOTA
[02:07]TI9显影之尘系列 - Vici Gaming
2019/08/20 DOTA
[19:54]夜魇凡尔赛茶话会 第一期02:看图识人
2021/03/11 DOTA
Python语言的12个基础知识点小结
2014/07/10 Python
在Django的视图中使用form对象的方法
2015/07/18 Python
Python实现配置文件备份的方法
2015/07/30 Python
Python选课系统开发程序
2016/09/02 Python
详解Python读取配置文件模块ConfigParser
2017/05/11 Python
基于Django用户认证系统详解
2018/02/21 Python
Django中使用Celery的方法示例
2018/11/29 Python
Pandas中两个dataframe的交集和差集的示例代码
2020/12/13 Python
Python 中如何使用 virtualenv 管理虚拟环境
2021/01/21 Python
html+css实现自定义图片上传按钮功能
2019/09/04 HTML / CSS
欧洲第一的摇滚和金属乐队服装网站:EMP
2017/10/26 全球购物
如何写好优秀的创业计划书
2014/01/30 职场文书
毕业留言寄语大全
2014/04/10 职场文书
节水倡议书范文
2014/04/15 职场文书
积极向上的团队口号
2014/06/06 职场文书
小学生植树节活动总结
2014/07/04 职场文书
政工例会汇报材料
2014/08/26 职场文书
货款欠条范本
2015/07/03 职场文书
团委副书记工作总结
2015/08/14 职场文书
浅谈Redis在直播场景的实践方案
2021/04/27 Redis