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;
      }
    }

  • 相关阅读:
    Jmeter中的变量(三)
    Jmeter组件和属性(二)
    Jmeter配置元件执行顺序
    Fiddler Web Session 列表(1)
    selenium webdriver操作各浏览器
    java1.8环境配置+win10系统
    python函数库及函数标准库
    MySql 数据库基础命令
    Linux 常用命令
    normalize.css
  • 原文地址:https://www.cnblogs.com/walei/p/8880994.html
Copyright © 2011-2022 走看看