手机原生键盘弹出导致页面元素被遮住或者浮动的问题

[JesuisTong]

也是个老生常谈的问题了，最近在做一个地址选择弹层的时候遇到的。

• 具体场景： 任何在页面底部的可以呼出原生键盘的控件（其实就是input），原生键盘会导致控件被键盘遮住，或者弹起键盘时样式出现错误的情况。ios端可能还有更加恶心的动画效果会导致键盘动画和页面元素显得非常不正常
• 业务需求： 尽量不要遮住你正在输入的控件
• 解决实现： 网上找了下有好多种实现，不过基本都是基于呼出键盘触发resize和输入的focus行为，监听到行为之后去判断dom元素是否被键盘遮住，如果被遮住触发scrollIntoView函数使得dom元素起码可以在view层看到。

  Array.from($('input')).forEach(i => {
      i.addEventListener('focus', () => { window.fuck = i })
  })
  window.onresize = () => {
     if (window.fuck && window.fuck.getBoundingClientRect().bottom > window.innerHeight) {
          window.fuck.scrollIntoView(false);
          window.fuck = null;
      }
  }

  嘛～大概就是这个意思了。(:з」∠)