h5页面input在安卓手机上点击弹起软键盘不顶起页面及顶起页面失去焦点时，页面不恢复布局，ios手机软键盘关闭的时候，页面还是被顶起的情况，小米手机软键盘覆盖的问题？

• 今天在公司的项目中，突然遇到了input框，点击及失去焦点的时候，在安卓手机和ios手机上遇到的不同的问题，经过大量的百度，找到如下方法，希望也能帮助你们解决问题！(vue的写法），如果在Java中配合vue，那么vue的聚焦事件和失去焦点的事件没有进行触发，使用监听的方法就可以了

• vue写法

            focus(){//获取焦点的时候进行触发
              window.addEventListener('resize', () => {        
                if (document.activeElement.tagName == 'INPUT') {                      
                    window.setTimeout(() => { document.activeElement.scrollIntoViewIfNeeded();            
                    }, 100);        
                } 
                })
            },
            blur(){//失去焦点的时候，进行触发
                var u = navigator.userAgent;
                if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {//安卓手机
                    this.$refs.input.scrollIntoView(false);
                }else{
                    window.scroll(0, 0);//苹果
                }
            }

• js的原声写法

//获取焦点的时候
document.getElementById("email").addEventListener("focus",()=>{
        window.addEventListener('resize', () => {        
            if (document.activeElement.tagName == 'INPUT') {                      
                 window.setTimeout(() => { document.activeElement.scrollIntoViewIfNeeded();            
              }, 100);        
           } 
        })
})
//失去焦点的时候
document.getElementById("email").addEventListener("blur",()=>{
   var u = navigator.userAgent;
   if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {//安卓手机
        this.$refs.input.scrollIntoView(false);
    }else{
       window.scroll(0, 0);//苹果
   }
})

• 新的补充，使用vue做的h5页面在微信中打开，当input失去焦点的时候，不点击软键盘关闭，而是点击其他的地方，软键盘关闭，页面底部还是留白，没有下去,在失去焦点的事件中，将下方的代码放上就可以了

document.getElementById("email").addEventListener("blur",()=>{
   var u = navigator.userAgent;
   if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {//安卓手机
       setTimeout(function () {
    document.getElementsByTagName("body")[0].style.height = document.body.scrollHeight+"px";
    document.getElementsByTagName("body")[0].style.width  = document.body.scrollWidth+"px";
},100)
    }else{
       window.scroll(0, 0);//苹果
   }
})

• 记录input框在小米手机原生浏览器中被软键盘覆盖的bug？

*首先这个问题当时大量的进行了百度，看了大多数人写的，都是通过软键盘弹起的时候，会改变页面的大小，触发resize，只要进行监听resize就可以了，软键盘弹起的时候，我们可以进行一些操作，百度上都有，但是小米的原生浏览器上不触发resize,此时百度上的一些方法都不好使了，最终使用了一种最笨的办法，就是用户点击input框聚焦的时候，那么给底部加上margin或者padding进行顶上去，失去焦点的时候将我们加上的padding和margin取消掉，（有个缺陷，点击软键盘上的隐藏，那么就会显示底部顶上来多余的空白，监听不到），最后为了用户的体验更好一点，我是每个input聚焦的时候，加上了不同的padding或者margin，让input框刚好到软键盘的上面（由于不同的手机，软键盘的高度是不同的，这里只做了一个软键盘弹出最高的进行一一调试），点击聚焦的时候，还让页面自动进行滚动到顶部，直接scrollTop=1000;因为每个input就加了一点margin或者是padding，所以会自动滚动到底部就不会在进行滚动了。