【移动端H5开发】iOS下页面底部的input被弹出键盘遮挡问题

【移动端H5开发】iOS下页面底部的input被弹出键盘遮挡问题

状况

在iOS下，如果页面底部有个input输入框，那么在input获得焦点，弹出虚拟键盘时，有一定的几率，input会被虚拟键盘给遮挡住，体验很糟糕。 尤其是第三方输入法，这个出现的几率极高。
这其实已经是一个老生常谈的问题，从早期的iOS版本一直持续到现在iOS11都是这样，感觉上像是iOS的bug，但是不知道为什么一直没有解决。
打印日志观察，发现键盘弹出后，页面窗口是变矮了，然后页面滚动到底部，即使是出现input框被虚拟键盘遮挡了，这个时候window.innerHeight + document.body.scrollTop 依然是和 document.body.scrollHeight相等的，所以简单的对比这两个数值来判断页面是否已经滚动到了底部是不行的。
网上查阅了大量的资料，提到了各种各样的解决办法，尝试了不下10种，基本上都不靠谱，不能最终解决，最后还是通过定时器动态调整scrollTop解决了这个问题（仍旧不完美）。

中间踩过的一些坑

1. 不要用fixed布局，iOS对fixed布局的支持比较弱，在虚拟键盘弹出的时候，fixed布局的元素有可能出现各种各样的问题，建议直接用absolute布局取代
2. 网上有说改用flex布局可以解决这个问题，实践发现压根没用，大家可以不用再试
3. 只调整一次scrollTop是不够的，最好在1秒内调整多次，比如每300毫秒调整一次

解决之道

在input的focus事件中，开启一个定时器，然后每隔300毫秒进行一次document.body.scrollTop=document.body.scrollHeight的调整，运行3次即可。然后在input的blur事件中，取消掉这个定时器。这样虽然input不会被遮挡了，但是由于滚动回弹的原因，视觉上会有页面回弹的效果，就是这点不太完美。
参考代码如下：

var timerId = null; 

onFocus(e) {
  let cnt = 0;
  setInterval( () => {
    if (cnt < 3) {
      cnt++;
    } else {
      clearInterval(timerId);
      timerId = null;
      return;
    }
    document.body.scrollTop = document.body.scrollHeight;
  }, 300);
} 

onBlur(e) {
  if (timerId) {
    clearInterval(timerId);
    timerId = null;
  }
}

作者：mercurygear
链接：http://www.jianshu.com/p/3320b5aa8879
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。