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 相关文章推荐
Js操作Select大全(取值、设置选中等等)
Oct 29 Javascript
点击表单提交时出现jQuery没有权限的解决方法
Jul 23 Javascript
深入理解JavaScript系列(28):设计模式之工厂模式详解
Mar 03 Javascript
基于JS代码实现导航条弹出式悬浮菜单
Jun 17 Javascript
jQuery实现select模糊查询(反射机制)
Jan 14 Javascript
Bootstrap模态窗口源码解析
Feb 08 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
Mar 14 Javascript
浅谈webpack编译vue项目生成的代码探索
Dec 11 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
Mar 02 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
Oct 24 Javascript
VueQuillEditor富文本上传图片(非base64)
Jun 03 Javascript
vuex Module将 store 分割成模块的操作
Dec 07 Vue.js
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上传文件,创建递归目录的实例代码
2013/10/18 PHP
php教程之魔术方法的使用示例(php魔术函数)
2014/02/12 PHP
PHP之uniqid()函数用法
2014/11/03 PHP
php curl 上传文件代码实例
2015/04/27 PHP
php操作MongoDB类实例
2015/06/17 PHP
Symfony2安装第三方Bundles实例详解
2016/02/04 PHP
针对多用户实现头像上传功能PHP代码 适用于登陆页面制作
2016/08/17 PHP
使用Zttp简化Guzzle 调用
2017/07/02 PHP
Thinkphp5.0框架视图view的循环标签用法示例
2019/10/12 PHP
疯掉了,尽然有js写的操作系统
2007/04/23 Javascript
基于jquery实现的可以编辑选择的下拉框的代码
2010/11/19 Javascript
javascript之bind使用介绍
2011/10/09 Javascript
js replace 与replaceall实例用法详解
2013/08/03 Javascript
javascript中RegExp保留小数点后几位数的方法分享
2013/08/13 Javascript
js中onload与onunload的使用示例
2013/08/25 Javascript
利用js读取动态网站从服务器端返回的数据
2014/02/10 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
2014/02/17 Javascript
JavaScript实现16进制颜色值转RGB的方法
2015/02/09 Javascript
JavaScript ES6的新特性使用新方法定义Class
2016/06/28 Javascript
jQuery滚动监听实现商城楼梯式导航效果
2017/03/06 Javascript
基于vue配置axios的方法步骤
2017/11/09 Javascript
iview通过Dropdown(下拉菜单)实现的右键菜单
2018/10/26 Javascript
vue实现修改图片后实时更新
2019/11/14 Javascript
JS一次前端面试经历记录
2020/03/19 Javascript
详解使用python crontab设置linux定时任务
2016/12/08 Python
Python爬虫:通过关键字爬取百度图片
2017/02/17 Python
Python实现自动登录百度空间的方法
2017/06/10 Python
详谈Numpy中数组重塑、合并与拆分方法
2018/04/17 Python
cmd运行python文件时对结果进行保存的方法
2018/05/16 Python
Python图片转换成矩阵,矩阵数据转换成图片的实例
2018/07/02 Python
Python SELENIUM上传文件或图片实现过程
2019/10/28 Python
加拿大最大的书店:Indigo
2017/01/01 全球购物
美国智能家居专家:tink
2019/06/04 全球购物
企业职业病防治方案
2014/05/29 职场文书
2019年大学生暑期社会实践调查报告模板
2019/11/07 职场文书