移动端解决input被输入法挡住的问题

Posted tgxh的博客

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端解决input被输入法挡住的问题相关的知识,希望对你有一定的参考价值。

有过移动端web开发经验的人应该都会遇到这个问题,一个input在页面最底部或者偏下的位置,输入时由于输入法的弹出,在部分浏览器下由于不会自动计算window的高度,导致input被输入法挡住。
本文的解决方式是利用scrollTop来解决,在input获取焦点后,动态地设置body的高度并设置scrollTop到指定位置,这样可以保证input会滚动到输入法上方,失去焦点后再恢复原来的位置。
有两种情况:
1、input在页面最底部,后面没有其他元素,这种情况我们可以获取窗口的高度减去input的高度再减去一些空余高度,可以得到应该滚动的高度,var scrollHeight = $(window).height() - $(‘input‘).height() - 40,这种情况下这么计算很合适,没什么问题。
2、然而有时候input不是在最底部,之后还有其他元素,如果按照上一种方式,当你滚动到input在屏幕中间或者上部的时候,由于滚动距离还是上一种方式获取的,这个时候滚动距离会大于应该滚动的距离,导致input直接到页面上方被隐藏了。
     这个时候我们换种思路,只要想办法获取input到窗口的上边框的距离即可,其他代码都一样,那么可以这么写,var scrollHeight = $(‘input‘).offset().top - $body.scrollTop() - 40,即input距离页面顶部的高度减body滚动的高度获得input距离窗口上方的高度。

完整代码:在线预览1 在线预览2

<div style="height: 1000px;"></div>
  <input type="text" style="width: 100%;height: 40px; ">
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script>
    var scrollHeight, //应该滚动的距离
      $body = $(body)
    $(input).on(focus, function () {
      //input距离页面顶部的高度减body滚动的高度获得input距离窗口上方的高度,40表示距离顶部留点空隙
      scrollHeight = $(input).offset().top - $body.scrollTop() - 40
      console.log(scrollHeight)
      //先修改body的高度,在滚动到对应的位置
      $body.height($body.height() + scrollHeight).animate({scrollTop: $body.scrollTop() + scrollHeight}, 300);
    }).on(blur, function () {
      //input失去焦点后恢复到原来的位置
      $body.animate({height: $body.height() - scrollHeight, scrollTop: $body.scrollTop() - scrollHeight}, 300)
    })
  </script>

 

以上是关于移动端解决input被输入法挡住的问题的主要内容,如果未能解决你的问题,请参考以下文章

移动端页面输入法挡住input输入框的解决方法

移动端H5页面_input获取焦点时,虚拟键盘挡住input输入框解决方法

移动端 模拟键盘 盖住表单

移动端输入法挡住输入框

解决移动端输入法挡住输入框的办法

移动端中 H5输入框在弹起键盘后被遮挡