移动端表单提交-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;
  }
}

原文地址:https://www.cnblogs.com/walei/p/8880994.html