zoukankan      html  css  js  c++  java
  • 移动端表单提交-input focus时键盘和定位元素(按钮)遮挡问题

    要实现这样一个提交用户输入信息的页面,在ios中,可以很完美的将视窗上移,但是每次在安卓手机底部定位的按钮总是会在键盘弹出后,重新定位在键盘上方;这里自己在写代码时,觉得这个解决方案还算可以,记录下:

    <body>
      <div class="page-index">
        <div class="m-input">
          <input class="js-input"></div>
        </div>
        <div class="btn"></div>
      </div>
    </body>

    html, body{
    height: 100%;
    }
    .page-index {
    height: 100%;
    .btn {
    position: absolute;
    left: 0;
    bottom: xxxpx;
    }
    }
    $('.js-input').on('tap focus', function(){
      if(test()) {//安卓
        $('body').height($(window).height());
      }
    })
    $('.js-input').on('blur', function(){
      if(test()) {//安卓
        setTimeout(function() {
          $('body').height(_this.bodyHeight);
        });
      }
    })

    //检测安卓或ios
    function test() {
      var ua = navigator.userAgent.toLowerCase();
      if (/iphone/.test(ua)) {
        return false;
      } else if (/android/.test(ua)) {
        return true;
      }
    }

  • 相关阅读:
    免密码远程登录和远程操作
    1、linux网络服务实验 用PuTTY连接Linux
    巧用CAS解决数据一致性问题
    第一天
    图像处理02
    图像处理01
    Poem 01(转)
    CS229 Lecture 01
    日本語1
    latex测试
  • 原文地址:https://www.cnblogs.com/walei/p/8880994.html
Copyright © 2011-2022 走看看