安卓和ios 软键盘弹起和收起

1 目前来说，js 应该是没有直接获取手机键盘状态的api,但是可以通过一些其他的特点来判断当前的键盘弹起和收起

2 安卓键盘弹起会触发页面的resize 事件（苹果不会），所以可以通过判断页面高度的前后变化来判断键盘的状态。

3 ios 在键盘收起的时候input 会失去焦点（安卓不会），所以可以通过input 的focus 和 blur 事件来判断键盘的状态

  或者通过页面的foucein 和 focusout 来判断键盘的状态（有时候键盘收起并不会触发focusout 事件，需要滚动一点点之后才会）

4 ios 键盘在弹起的时候会让整个页面向上移动，键盘在页面的下面

5 安卓会改变窗口的高度，让整个窗口的高度变短，正常情况下，窗口的高度变短了之后里面内容的高度并不会变化，只是会隐藏掉，所以这个时候多出来内容就会看不到了。输入框就像是被键盘盖住了一样。

   解决：

   使用 在键盘弹起的时候使用document.activeElement.scrollIntoView(false)

滚动页面，让页面滚动到可视区域。

里面的false 是正好滚动到键盘上面，true 是滚动到最底部。

      

 if (window.phoneType == "android") {
            //获取原窗口的高度
            var originalHeight = document.documentElement.clientHeight || document.body.clientHeight;
            window.onresize = function() {
              //键盘弹起与隐藏都会引起窗口的高度发生变化
              var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
              if (resizeHeight - 0 < originalHeight - 0) {
                //当软键盘弹起，在此处操作
                that.showBottomBar = false; 
                document.activeElement.scrollIntoView(false);//焦点元素滚到可视区域的问题
              } else {
                //当软键盘收起，在此处操作
                that.showBottomBar = true;
                document.body.scrollIntoView();       
                // window.scroll(0, 0);     
              }
            }
          }else if (window.phoneType == "ios") {
            document.body.addEventListener('focusin', () => {
              //软键盘弹出的事件处理
              that.showBottomBar = false;
            })

            let formDom = document.getElementById("confirmForm");
            let textareaL = formDom.querySelectorAll("textarea");
            textareaL.forEach(item => {
              item.addEventListener('blur', () => {
                // that.$toast("触发blur事件")
                //软键盘弹出的事件处理
                that.showBottomBar = true;
                document.body.scrollIntoView();
                window.scroll(0, 0);
              })
            })

          }