zoukankan      html  css  js  c++  java
  • H5页面关于android软键盘弹出顶起底部元素的解决方案

      应用场景:用div在移动端页面设置一个底部工具栏,css的代码大概如下:

    .tool{
        width: 100%;
        height: 60px;
        position: fixed;
        left: 0px;
        bottom: 0px;
        background-color: #000080
      }

      如果页面有一输入框<input type="text">,在点击输入框输入内容时,移动端软键盘弹起,这时这个div也一起弹起,顶在软键盘上面,会遮挡输入框,要用下面的方法去消除弹起来的div,主要思路是div弹起来后隐藏掉。

      通过resize方法监听$(this).height(),获取页面高度,成功获得改变后的页面高度,软键盘弹出时隐藏被顶起的页面。

    var winHeight = $(window).height();   //获取当前页面高度
            $(window).resize(function(){
               var thisHeight=$(this).height();
                if(winHeight - thisHeight >50){
                     //当软键盘弹出,在这里操作
                $(".顶起的页面").hide();
                }else{
                    //当软键盘收起,在此处操作
                $(".顶起的页面").show();
                }
            });

      this是html对象 $(this)是jq对象,调用jq对象的height()方法。

  • 相关阅读:
    分页
    【移动】
    iOS
    内存数据库
    HOJ——T 2275 Number sequence
    HOJ——T 1867 经理的烦恼
    HOJ——T 2430 Counting the algorithms
    洛谷—— P2047 社交网络
    HDU——T 1166 敌兵布阵
    前端学习之jquery
  • 原文地址:https://www.cnblogs.com/qingsong/p/9864104.html
Copyright © 2011-2022 走看看