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

(0)

相关推荐

  • 文本框(input)获取焦点(onfocus)时样式改变的示例代码

    摘要:许多重视用户体验的设计师都希望给文本框(input)加上获取焦点或者鼠标悬停时的样式切换效果.其实很简单,我们只需要获取页面上的文本框,加上onfocus事件或者其他对应的事件即可.本文介绍了如何在获取焦点时切换样式,明白原理后,实现其他效果就很简单了. 许多重视用户体验的设计师都希望给文本框(input)加上获取焦点或者鼠标悬停时的样式切换效果.其实很简单,我们只需要获取页面上的文本框,加上onfocus事件或者其他对应的事件即可.本文介绍了如何在获取焦点时切换样式,明白原理后,实现其他

  • 火狐下input焦点无法重复获取问题的解决方法

    今天遇到了一个很棘手的问题,就是在做一些输入框的验证的时候,我这边项目的业务逻辑就是当我选中某个select的某个特定option的时候,需要显示出一个input输入框让用户输入东西,但是如果用户啥也不做,就必须弹出警告框让用户输入,等其输入后,我这边再将input隐藏掉. 因此,便产生了如下问题,input输入框显示的时候,需要自动获取焦点,此时,我是用的 复制代码 代码如下: document.getElementById('id').focus(); 恩,尝试了一下,效果很好,不禁心中大喜

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

    代码如下所示: <div class="search-box"> <input class="search-input" type="text" placeholder="请输入名称"> </div> <!--底部--> <div id="mini_nav" class="nav bt-nav"> <div> <

  • wamp中mysql安装时能启动重启后无法启动的解决办法

    第一次安装wamp之后,所有服务可以正常使用,但是重启之后wamp的图标就变成黄色的了,重装了也这样 查看一下错误日志: 日志显示的错误是这样的: 日志提示可能是3306端口被占用的错误,那来看一下是哪个程序占用了3306端口: windows下运行cmd ,输入 netstat -aon|findstr "3306" 可以看到是pid为2092这个程序占用了3306端口,把他结束掉 输入指令: taskkill /f /pid 2092 成功之后重启wamp,正常启动! 总结 以上所

  • shell脚本中执行时提示“没有那个文件或目录”的解决办法

    出现bad interpreter:No such file or directory的原因,是文件格式的问题.这个文件是在Windows下编写的.换行的方式与Unix不一样,但是在vim下面如果不Set一下又完全看不出来. 问题分析:1.将windows 下编写好的SHELL文件,传到linux下执行,提示出错.2.出错信息:bad interpreter: 没有那个文件或目录. 问题原因:因为操作系统是windows,在windows下编辑的脚本,所以有可能有不可见字符.脚本文件是DOS格式

  • dialog dismiss时键盘不消失的问题浅析及解决办法

    当setCanceledOnTouchOutside(true),点击阴影处,dialog dismiss时键盘不消失的问题. 如图 一开始觉得很简单,监听下onDimiss()方法,在里面隐藏键盘不就行了. 但是发现大多数手机都不会隐藏(魅族x4会隐藏). 这是为什么呢?为什么键盘不消失呢? 经过测试,发现edittext.getWindowToken()为null. /** * 关闭键盘 * * @param context * @param et */ public static void

  • MyBatis启动时控制台无限输出日志的原因及解决办法

    你是否遇到过下面的情况,控制台无限的输出下面的日志: Logging initialized using 'class org.apache.ibatis.logging.log4j.Log4jImpl' adapter. Logging initialized using 'class org.apache.ibatis.logging.log4j.Log4jImpl' adapter. Logging initialized using 'class org.apache.ibatis.lo

  • jquery(live)中File input的change方法只起一次作用的解决办法

    错误写法 复制代码 代码如下: $("#uploadImg").click(function(){ do something }); 正确写法 复制代码 代码如下: $("#uploadImg").live('change',function(){ do something });

  • win10系统安装oracle11g时遇到INS-13001环境不满足最低要求解决办法

    win10安装oracle 11g,在安装时点击setup.exe之后,出现了:[INS-13001]环境不满足最低要. 解决办法很简单,这是因为版本注册问题,默认oracle 11没有添加win10的注册信息,所以要讲win10的注册信息添加到oracle的配置文件里.打开oracle安装包,找到stage文件夹,找到cvu_prereq.xml文件,用记事本打开可以看到如下内容,在<CERTIFIED_SYSTEMS>标签最后添加如下第二部分. <CERTIFIED_SYSTEMS&

  • Android 软键盘弹出时把原来布局顶上去的解决方法

    键盘弹出时,会将布局底部的导航条顶上去. 解决办法: 在mainfest.xml中,在和导航栏相关的activity中加: <activity android:name=".filing.MainActivity" android:windowSoftInputMode="adjustResize|stateHidden" /> windowSoftInputMode 属性解释: 活动的主窗口如何与包含屏幕上的软键盘窗口交互.这个属性的设置将会影响两件事

  • nginx+php出现No input file specified解决办法

    今天在自己本地的开发环境突然出现了No input file specified错误,反复检查返现自己的配置文件和配置路径以及权限都没有问题.经过反复的排查终于发现了问题,现将问题及解决分享如下: 问题原因分析 在GitHub上下载了一个开源的tp5项目,之前自己本地的网站运行都没有问题.但是安装了这个开源项目后就发现本地其他网站都无法访问了.访问就是No input file specified错误.在网上也找了解决办法,但是都不是,看来这个错误有点儿诡异. 后来反复尝试,重启电脑后问题得到解

  • Android中底部菜单被输入法顶上去的解决方案

    安卓手机输入法弹出,消失会触发 window.onresize事件,我们一般的解决方法是获取焦点,底部隐藏,失去焦点,底部菜单出现,但是,有些人会点击这个按钮收起键牌 那么,这个时候你的失去焦点无效,还有一种方法呢,是把position:fixed;改成position:absoult;这样底部菜单就不会顶上去,但是这种方法,经过我的实验,还是会被输入法顶上去,这两种方法都不要完全解决问题,还有一种是布局的问题,主页面:position:relative,底部菜单:position:absoul

随机推荐