移动端输入框被键盘挡住问题

Question

由于所开发的页面内嵌在公司的一个 APP 中，有一个类似聊天窗口的界面，测试的时候发现在部分安卓机中输入框被完全遮挡住，踩这个坑时在网上找了好多资料，好像都没有一套完整的解决办法，先看其中一种解决办法，可以解决绝大数安卓机上面的问题：

if(/Android/.test(navigator.appVersion)) {
   window.addEventListener("resize", function() {
     if(document.activeElement.tagName=="INPUT" || document.activeElement.tagName=="TEXTAREA") {
       document.activeElement.scrollIntoView();
     }
  })
}

即在安卓机中通过监听当窗口 resize 时，判断当前获得焦点的元素是否为输入框，再调用该元素的 scrollIntoView()，即将该元素展示在当前窗口的可视区域。由于只有 scrollIntoView 被各浏览器均支持，所以这个方法最为常用。

使用这段代码之后，在微信或者其他浏览器测试时有效果，但因为是需要内嵌在自家APP上，使用这段代码一直没有解决输入框被挡住的问题，最后测试才发现，APP 内置浏览器在聚焦输入框弹出键盘根本没有触发窗口的 resize 事件，瞬间心中万马奔腾(＞﹏＜)~~~。

后面在借鉴了某阿里的一个网页版的聊天界面，发现它是通过获取输入框焦点将输入框定位到窗口略高于输入框的位置，在失去焦点键盘弹回时再恢复到底部，于是通过这种方式处理，暂时比较暴力的解决了在安卓上该 APP 上输入框被挡住的问题，这种方法显然是不完美的，比如由于无法监听 resize 事件，而且使用的键盘高度不固定，所以只能大概的将高度设置保持在屏幕一半偏上一点。保证绝大数情况下输入框在键盘之上显示。