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

  • 今天在公司的项目中,突然遇到了input框,点击及失去焦点的时候,在安卓手机和ios手机上遇到的不同的问题,经过大量的百度,找到如下方法,希望也能帮助你们解决问题!(vue的写法),如果在Java中配合vue,那么vue的聚焦事件和失去焦点的事件没有进行触发,使用监听的方法就可以了
  • vue写法
<input type="email"  name="email" placeholder="Enter here" v-model="user_email"
             maxlength="20" @blur="blur" ref="input" @focus="focus">
            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的原声写法
<input type="email"  name="email" placeholder="Enter here" v-model="user_email"
             maxlength="20" id="email">
//获取焦点的时候
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);//苹果
   }
})

推荐阅读更多精彩内容