iOS软键盘调用遮挡问题及软键盘撑起的页面无法正常回退到原来位置BUG解决方案

最近在写一个h5,大家都知道,移动端开发嘛,兼容问题是经常会遇到的,尤其是iOS,本人已经无力吐槽了。

虽然移动端安卓和iOS大部分内容都是兼容的,但是iOS还是有一些地方与安卓还是很有差异的,所以在开发过程中个人建议大家将iOS不兼容部分独立出来做处理。

今天本人就碰到了一个iOS的特殊bug,是输入框调起软键盘后输入框fixed定位失效被软键盘遮挡,发送消息过后软键盘占用部分无法正常回退的bug(6.7.4版本之后才会出现)

web.isIOS = function() {
        var isIphone = window.navigator.userAgent.toLowerCase().indexOf("iphone")>-1;
        var isIpad = window.navigator.userAgent.toLowerCase().indexOf("ipad")>-1;
        return isIphone || isIpad;
    }

以上方法是我用来检测iOS的方法

聊天信息代码


如果不做任何处理,安卓是正常的,但是iOS会偶而的出现软键盘遮挡住输入框的情况,而且iOS(6.7.4之后)就会出现输入框失去焦点后软键盘占用部分无法正常回退到底部的bug。

本人的处理是将输入框部分的iOS聚焦部分单独处理

方法:让页面滚动条跟随页面高度自动滚动(设置定时器是为了让软件盘的调用流畅)

iosInputFocus:function(){//处理iOS软键盘遮挡输入框
	if(web.isIOS()){
	  	setTimeout(()=>{
			document.body.scrollTop=document.body.scrollHeight
		 },400)
	}
},

同样的软键盘占用部分也是一个道理,本人的处理是在聚焦的时候设置值来监测用户输入,然后监听这个值的改变来控制页面滚动条的位置。

watch:{//处理iOS6.7.4之后软键盘关闭后页面无法回退到原来正常的位置
	 userInput: function( val ){
	       if(val){
		        setTimeout(()=>{
					document.body.scrollTop=document.body.scrollHeight
				},400)
	       }else{
		       setTimeout(()=>{
					document.body.scrollTop=document.body.scrollHeight
				},400)
	       }
	  }
},
methods:{
    iosInputFocus:function(){//处理iOS软键盘遮挡输入框
          this.userInput=true
          if(web.isIOS()){
	      setTimeout(()=>{
		     document.body.scrollTop=document.body.scrollHeight
	      },400)
	 }
    },
    msgEnter:function(){//发送新消息
            this.userInput=false
	  		if(this.commitVal.Trim()==""){
	  			return;
	  		}
	  		this.axios.post("/api/privateMsg",{
	  			type:2,
	  			user:localStorage.getItem("userId"),
	  			org:this.orgId,
	  			msg:this.commitVal
	  		}).then((res)=>{
	  				if(res.data.code==0){
	  					this.commitVal = "";
	  					this.getPrivateMsg();
	  					this.$refs.commitInput.blur();
	  					window.setTimeout(()=>{
			            	 		this.$refs.scrollEle.scrollTop = this.$refs.scrollEle.scrollHeight
			         	},300)
	  				}
	  				
	  		})
	  	}
}

以上就是本人对iOS软键盘调用回退失效bug的处理,有过有大佬有其他方案请多多指教。

你可能感兴趣的:(我的bug及其解决方案,我的笔记)