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 相关文章推荐
解决Extjs4中form表单提交后无法进入success函数问题
Nov 26 Javascript
node+express+jade制作简单网站指南
Nov 26 Javascript
Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
Jquery操作Ajax方法小结
Nov 29 Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
Sep 05 Javascript
详解vue-cli中的ESlint配置文件eslintrc.js
Sep 25 Javascript
极简主义法编写JavaScript类
Nov 02 Javascript
浅谈vue项目优化之页面的按需加载(vue+webpack)
Dec 11 Javascript
element UI upload组件上传附件格式限制方法
Sep 04 Javascript
20道JS原理题助你面试一臂之力(必看)
Jul 22 Javascript
JS几个常用的函数和对象定义与用法示例
Jan 15 Javascript
详解element上传组件before-remove钩子问题解决
Apr 08 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
PHP的array_diff()函数在处理大数组时的效率问题
2011/11/27 PHP
ThinkPHP模版引擎之变量输出详解
2014/12/05 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
laravel 5异常错误:FatalErrorException in Handler.php line 38的解决
2017/10/12 PHP
详解php用static方法的原因
2018/09/12 PHP
PHP中遍历数组的三种常用方法实例分析
2019/06/24 PHP
php设计模式之工厂模式用法经典实例分析
2019/09/20 PHP
prototype class详解
2006/09/07 Javascript
javascript 选择文件夹对话框(web)
2009/07/07 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
2013/08/28 Javascript
判断javascript的数据类型(示例代码)
2013/12/11 Javascript
jquery 实现两Select 标签项互调示例代码
2014/09/25 Javascript
Javascript的无new构建实例详解
2016/05/15 Javascript
浅谈js基本数据类型和typeof
2016/08/09 Javascript
js仿搜狐视频记录片列表展示效果
2020/05/30 Javascript
js弹性势能动画之抛物线运动实例详解
2017/07/27 Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
2018/02/05 Javascript
浅谈vuejs实现数据驱动视图原理
2018/02/23 Javascript
JavaScript模拟实现自由落体效果
2018/08/28 Javascript
在vue项目中使用codemirror插件实现代码编辑器功能
2019/08/27 Javascript
Layui tree 下拉菜单树的实例代码
2019/09/21 Javascript
js实现AI五子棋人机大战
2020/05/28 Javascript
python join方法使用详解
2019/07/30 Python
python自动识别文本编码格式代码
2019/12/26 Python
Whittard官方海外旗舰店:英国百年茶叶品牌
2018/02/22 全球购物
Currentbody美国/加拿大:美容仪专家
2020/03/09 全球购物
2019年c语言经典面试题目
2016/08/17 面试题
简述进程的启动、终止的方式以及如何进行进程的查看
2014/02/20 面试题
安全施工责任书
2014/08/25 职场文书
先进学校事迹材料
2014/12/30 职场文书
社区节水倡议书
2015/04/29 职场文书
2016党员学习《反对自由主义》心得体会
2016/01/22 职场文书
2016年政治理论学习心得体会
2016/01/25 职场文书
导游词之烟台威海蓬莱
2019/11/14 职场文书
Python 正则模块详情
2021/11/02 Python
Python实现仓库管理系统
2022/05/30 Python