H5 输入框键盘弹出收起

1 . 安卓系统 下点击输入框 键盘弹出以及收起 会使得webview 的窗口高度发生变化

键盘弹出的时候：

webview的原高度 = 键盘的高度 + webview 现在的窗口高度

Ios 系统 下 键盘弹出收起不会影响webview 的窗口高度发生变化

键盘弹出的时候 可以监听focusin事件; 键盘收起的时候 可以监听focuout 事件; （focusin/focusout 支持冒泡）

但是安卓系统下 点击键盘的右边的收起 不会触发 focuout事件；  只有其他空白处使得光标失去焦点(blur) 才会触发;  所以安卓下 可以通过判断 webview 的高度变化 来 监听键盘的弹出收起； 

安卓下 
//获取原窗口的高度
      var originalHeight=document.documentElement.clientHeight ||document.body.clientHeight;
      window.onresize = function() {
        // alert('高度发现变化')
          //键盘弹起与隐藏都会引起窗口的高度发生变化
          var resizeHeight=document.documentElement.clientHeight || 
           document.body.clientHeight;
          const activeEl = document.activeElement; // 获取当前点击的元素
          if(resizeHeight

Ios 系统下
document.body.addEventListener("focusin", (e) => {

});
document.body.addEventListener("focusout", () => {
});

单独的input/textarea 监听键盘弹出、收起就监听各自的foucs/blur 事件

参考：

彻底解决H5中键盘遮挡输入框的问题 - 知乎

h5手机键盘弹出收起的处理 | Hzzly